vue3动态设置style

在 Vue3 中，你可以使用 `v-bind:style` 或者简写的冒号语法 `:style` 来动态设置样式。下面是一个简单的例子：

<template>
  <div :style="{ backgroundColor: bgColor, fontSize: fontSize + 'px' }">这是一个动态设置样式的 div。</div>
</template>

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

在上面的例子中，我们使用了`:style`来绑定一个对象，对象中的属性名是 CSS 样式属性名，属性值是对应的值。在这个例子中，我们动态绑定了`backgroundColor`和`fontSize`两个样式属性。

当然，你也可以将样式对象定义在计算属性中，然后再引用计算属性来绑定样式：

<template>
  <div :style="myStyle">这是一个动态设置样式的 div。</div>
</template>

<script>
export default {
  data() {
    return {
        bgColor: 'yellow',
        fontSize: 16
    }
  },
  computed: {
    myStyle() {
      return {
        backgroundColor: this.bgColor,
        fontSize: this.fontSize + 'px'
      }
    }
  }
}
</script>

在上面的例子中，我们定义了一个计算属性 `myStyle`，它返回一个对象，这个对象包含了我们想要动态设置的样式属性。然后我们在`<div>`中通过`:style="myStyle"`来绑定这个计算属性。这样做的好处是，如果需要动态设置的样式属性比较多，可以将它们统一放在计算属性中，代码更加清晰。