vue3 :style如何使用

在Vue 3中，你可以使用`:style`指令来设置元素的样式。`:style`指令可以接收一个对象、数组或字符串作为值，具体取决于你想要设置的样式。

1. 对象语法：
你可以使用对象语法来动态绑定多个样式。在对象中，键是CSS属性，值是对应的样式值。例如：

   <template>
     <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello Vue!</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         textColor: 'red',
         fontSize: 16
       };
     }
   };
   </script>

在上述示例中，`textColor`和`fontSize`是数据属性，可以根据需要进行更改。

2. 数组语法：
你还可以使用数组语法来应用多个样式。数组中可以包含多个样式对象或类名字符串。例如：

   <template>
     <div :style="[baseStyles, { color: dynamicColor }]">Hello Vue!</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         baseStyles: {
           fontSize: '16px',
           fontWeight: 'bold'
         },
         dynamicColor: 'red'
       };
     }
   };
   </script>

3. 字符串语法：
如果你只想使用静态样式，你可以直接传递一个字符串作为`:style`的值。例如：

   <template>
     <div :style="'color: red; font-size: 16px;'">Hello Vue!</div>
   </template>

这些是在Vue 3中使用`:style`指令设置样式的几种常见方法。你可以根据自己的需求选择适合的语法来设置元素的样式。