Class 与 Style 如何动态绑定？

在Vue.js中，可以使用v-bind指令来动态绑定class和style属性，从而根据数据的变化动态改变元素的样式。

动态绑定 Class

可以使用:class或v-bind:class指令来动态绑定元素的class属性。有以下几种方式可以实现动态绑定class：

1. 对象语法：
   通过传递一个对象来动态绑定class，对象的键是class名，值是布尔值，只有值为true的class名才会被应用。

    <div :class="{ active: isActive, 'text-danger': hasError }"></div>
   

2. 数组语法：
   通过传递一个数组来动态绑定class，数组中的每个元素都是一个class名，可以根据条件判断动态添加不同的class。

   <div :class="[isActive ? 'active' : '', hasError ? 'text-danger' : '']"></div>
   

3. 计算属性：
   通过计算属性来返回一个对象或数组，动态生成class名。

   <div :class="classObject"></div>
   

   data() {
     return {
       isActive: true,
       hasError: false
     };
   },
   computed: {
     classObject() {
       return {
         active: this.isActive,
         'text-danger': this.hasError
       };
     }
   }
   

动态绑定 Style

可以使用:style或v-bind:style指令来动态绑定元素的style属性。有以下几种方式可以实现动态绑定style：

1. 对象语法：
   通过传递一个对象来动态绑定style，对象的键是CSS属性名，值是对应的属性值。

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

2. 数组语法：
   通过传递一个数组来动态绑定style，数组中的每个元素都是一个对象，可以根据条件判断动态添加不同的样式。

   <div :style="[isActive ? { color: 'red' } : { color: 'blue' }]"></div>
   

3. 计算属性：
   通过计算属性来返回一个对象，动态生成样式。

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

   data() {
     return {
       activeColor: 'red',
       fontSize: 16
     };
   },
   computed: {
     styleObject() {
       return {
         color: this.activeColor,
         fontSize: this.fontSize + 'px'
       };
     }
   }
   

通过动态绑定class和style属性，可以根据组件的状态或数据的变化，动态改变元素的样式，实现更灵活的界面设计。