vue动态绑定样式style

Vue.js 中可以使用 `v-bind:style` 或者简写为 `:style` 来动态绑定样式。具体用法如下：

1. 直接绑定一个样式对象

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

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

2. 绑定一个返回样式对象的计算属性

<template>
  <div :style="textStyle">Hello World</div>
</template>

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

这两种方式都可以动态绑定样式，具体使用哪种方式可以根据实际情况选择。