vue绑定style

在 Vue 中，可以使用 `v-bind` 或者简写的 `:` 来绑定样式。

1. 绑定单个样式：

   <template>
     <div :style="{ color: textColor }">Hello World</div>
   </template>

   <script>
   export default {
     data() {
       return {
         textColor: 'red'
       };
     }
   }
   </script>

2. 绑定多个样式：

   <template>
     <div :style="customStyle">Hello World</div>
   </template>

   <script>
   export default {
     data() {
       return {
         customStyle: {
           color: 'red',
           fontSize: '20px'
         }
       };
     }
   }
   </script>

3. 动态绑定样式：

   <template>
     <div :style="getStyle">Hello World</div>
   </template>

   <script>
   export default {
     data() {
       return {
         isRed: true
       };
     },
     computed: {
       getStyle() {
         return this.isRed ? { color: 'red' } : { color: 'blue' };
       }
     }
   }
   </script>

在上述示例中，`:style` 绑定了一个对象，对象中的属性是 CSS 样式的名称，值是对应的样式值。可以直接给样式属性赋值字符串，也可以使用对象来动态绑定样式。