如何在VUE中更改CSS

<template>
  <div>
    <p :style="{ color: textColor, fontSize: textSize + 'px' }">Hello World</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textColor: 'red',
      textSize: 20
    }
  }
}
</script>

<template>
  <div>
    <p :class="{ 'text-red': isRed, 'text-bold': isBold }">Hello World</p>
  </div>
</template>
<style>
.text-red {
  color: red;
}
.text-bold {
  font-weight: bold;
}
</style>
<script>
export default {
  data() {
    return {
      isRed: true,
      isBold: false
    }
  }
}
</script>

<template>
  <div>
    <p :style="textStyle">Hello World</p>
  </div>
</template>
<script>
export default {
  computed: {
    textStyle() {
      return {
        color: this.textColor,
        fontSize: this.textSize + 'px'
      }
    }
  },
  data() {
    return {
      textColor: 'red',
      textSize: 20
    }
  }
}
</script>