如何在vue.js中动态应用CSS？

<template>
  <div :style="{ color: textColor, fontSize: textSize + 'px' }">Hello Vue!</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      textSize: 16
    }
  }
}
</script>

<template>
  <div :style="computedStyles">Hello Vue!</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      textSize: 16
    }
  },
  computed: {
    computedStyles() {
      return {
        color: this.textColor,
        fontSize: this.textSize + 'px'
      }
    }
  }
}
</script>

<template>
  <div :class="classObject">Hello Vue!</div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false
    }
  },
  computed: {
    classObject() {
      return {
        red: this.isRed,
        bold: this.isBold
      }
    }
  }
}
</script>