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属性，可以根据组件的状态或数据的变化，动态改变元素的样式，实现更灵活的界面设计。