Vue3 中 动态:style的使用

在 Vue3 中，你可以使用 `v-bind:style` 或者简写为 `:style` 来绑定动态样式。

例如，你可以在模板中这样写：

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

在上面的例子中，`textColor` 和 `fontSize` 是 Vue 实例中的响应式数据，它们会随着数据的变化而更新。在样式对象中，你还可以使用 JavaScript 表达式来计算样式值。

另外，你也可以通过计算属性来动态生成样式对象。例如：

<template>
  <div :style="textStyle">Hello world!</div>
</template>

export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16,
    };
  },
  computed: {
    textStyle() {
      return {
        color: this.textColor,
        fontSize: `${this.fontSize}px`,
      };
    },
  },
};

在上面的例子中，`textStyle` 是一个计算属性，它返回一个样式对象。这样，我们就可以在模板中通过 `:style` 绑定这个计算属性，实现动态样式绑定。