如何在Vue中部分替换css类名？

<template>
  <div :class="{'old-class': condition, 'new-class': !condition}"></div>
</template>

<script>
export default {
  data() {
    return {
      condition: true
    }
  }
}
</script>

<template>
  <div :class="computedClass"></div>
</template>

<script>
export default {
  data() {
    return {
      condition: true
    }
  },
  computed: {
    computedClass() {
      return this.condition ? 'old-class' : 'new-class';
    }
  }
}
</script>

<template>
  <div>
    <div v-if="condition" class="old-class"></div>
    <div v-else class="new-class"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: true
    }
  }
}
</script>