vue动态绑定class之动态添加class的多种写法

能够向组件添加动态类名是非常强大的功能。它使我们可以更轻松的自定义不同场景下不同样式。

对象形式

//html


//或者

类名 active 依赖于数据 isActive ,当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名。

判断是否绑定一个active

//html


//或者

类名 active 依赖于数据 isActive ,当其为 -1或==index的时候，div 会拥有类名 active；否则不再拥有 active 类名。

对象形式(绑定并判断多个)

//第一种（用逗号隔开）

类名 active 依赖于数据 isActive ,当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名，类名 sort 同逻辑。

//第二种（放在data里面）
//这种方法用于已确定使用的样式，但是现在某种样式不显示或显示


data() {
  return {
    classObject:{ active: true, sort:false }
  }
}

//语法
对象名:{
    样式1:true|false,
    样式2:true|false
}

类名 active ，当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名，类名 sort 同逻辑。

使用计算属性来简化类

第三种（使用computed属性）


data() {
  return {
    isActive: true,
    isSort: false
  }
},

computed: {
  classObject() {
    return {
      active: this.isActive,
      sort:this.isSort
    }
  }
}

 类名 active ，当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名，类名 sort 同逻辑。

第四种（使用computed属性，根据已知条件添加class）


computed: {
  classObject() {
    return function(index){
        return index === 0 ? 'active' : 'sort'
    }
  }
}

类名 active 依赖于数据传入的 index,当其为 0 时候，div 会拥有类名 active；否则拥有 sort  类名。 

数组形式

//单纯数组 绑定data对象


data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}

数组与三元运算符结合判断选择需要的class

// 前后都可以加静态css类名

//或者

//或者

//或者

//或者

注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染

数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号

//或者

//或者

三目运算符

//或者

//或者

到此结束。