vue 3如何动态style

在Vue 3中，动态添加样式可以通过几种方法实现，下面是一些常见的方法：

1. 绑定内联样式：
使用`v-bind:style`或简写为`:`，可以根据表达式的结果动态设置元素的样式。例如：

   <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在上面的例子中，`activeColor`和`fontSize`是组件的data属性，它们的值将动态决定文本的颜色和大小。

2. 绑定数组样式：
可以绑定一个包含多个样式对象的数组，这样可以将多个样式应用到同一个元素上。例如：

   <div :style="[baseStyles, overridingStyles]"></div>

在这个例子中，`baseStyles`和`overridingStyles`都是样式对象，后者将覆盖前者中相同的属性。

3. 使用计算属性：
通过计算属性来返回一个样式对象或样式数组。计算属性可以根据组件的响应式状态来动态计算样式，这使得样式的逻辑更加清晰。例如：

   computed: {
     computedStyle() {
       return { color: this.activeColor, fontSize: this.fontSize + 'px' };
     }
   }

然后在模板中使用：

   <div :style="computedStyle"></div>

4. 使用JavaScript表达式：
Vue 允许在`:style`绑定中使用JavaScript表达式。例如：

   <div :style="`color: ${activeColor}; font-size: ${fontSize}px;`"></div>

使用这种方式时，需要确保表达式是安全的，避免执行不安全的JavaScript代码。