vue3如何设置style样式动态绑定

在Vue3中，设置动态样式可以使用`v-bind:style`指令或者简写的`:style`。具体操作如下：

1. 在模板中使用`:style`绑定样式对象，例如：

<div :style="{color: textColor, fontSize: fontSize + 'px'}">这是一段文字</div>

2. 在Vue实例中定义样式对象，例如：

export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16,
    };
  },
};

这样，当`textColor`或`fontSize`的值改变时，样式也会相应地改变。

如果想要只绑定部分样式，可以使用对象语法或数组语法：

<!-- 对象语法 -->
<div :style="{color: textColor, 'font-size': fontSize + 'px'}">这是一段文字</div>

<!-- 数组语法 -->
<div :style="[style1, style2]">这是一段文字</div>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16,
      style1: {
        color: 'green',
      },
      style2: {
        'font-size': '24px',
      },
    };
  },
};
</script>

注意，在使用数组语法时，后面的样式会覆盖前面的样式。