vue动态绑定class的最常用几种方式

第一种

1.绑定单个class

js部分:判断是否绑定一个active

data() {
    return {
      isActive: true
    };
  }

2.绑定多个class,需要逗号隔开就行

 

js部分:判断是否绑定对应class

  data() {
    return {
      isActive: true,
      hasError: true
    };
  }

第二种(绑定的数据对象)

data: {
  classObject: {
    active: true,
  }
}

第三种(绑定一个返回对象的计算属性) []

export default {
  data() {
    return {
    isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

第四种(单纯数组方法)

 data() {
    return {
      activeClass: "active",
      errorClass: "disActive"
    };
  },

第五种(数组与三元运算符结合判断选择需要的class)

 data() {
    return {
      isActive: false,
    };
  },

你可能感兴趣的:(vue动态绑定class的最常用几种方式)