:class 与 :style 绑定

您想问的是在Vue.js中如何使用:class和:style动态绑定CSS样式吗？

在Vue.js中，我们可以使用v-bind指令来动态地绑定HTML元素的属性。当我们需要动态地绑定CSS类或样式时，我们可以使用:class和:style指令分别绑定CSS类和样式。

:class指令可以接受一个对象，该对象的属性名为CSS类名，属性值为布尔值或计算属性，表示是否应该将该CSS类应用于元素。例如，我们可以这样绑定一个CSS类：

<div :class="{ active: isActive }"></div>

上述代码中，当isActive为true时，元素将会应用名为"active"的CSS类。当然，我们也可以使用计算属性来动态计算CSS类：

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

data: {
  isActive: true,
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      'text-danger': !this.isActive
    }
  }
}

上述代码中，classObject计算属性返回一个对象，该对象的属性名为CSS类名，属性值为布尔值或计算属性。当isActive为true时，元素将应用名为"active"的CSS类，当isActive为false时，元素将应用名为"text-danger"的CSS类。

:style指令可以接受一个对象或一个计算属性，该对象的属性名为CSS样式属性名（需要使用驼峰式写法），属性值为CSS样式属性值。例如，我们可以这样绑定一个CSS样式：

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

上述代码中，textColor和fontSize都是Vue实例的数据属性，当它们的值发生变化时，元素的颜色和字体大小也会相应地变化。当然，我们也可以使用计算属性来动态计算CSS样式：

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

data: {
  textColor: 'red',
  fontSize: 20,
},
computed: {
  styleObject: function () {
    return {
      color: this.textColor,
      fontSize: this.fontSize + 'px'
    }
  }
}

上述代码中，styleObject计算属性返回一个对象，该对象的属性名为CSS样式属性名，属性值为Vue实例的数据属性或计算属性。当textColor或fontSize的值发生变化时，元素的颜色和字体大小也会相应地变化。