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

对象形式

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

//或者

<div :class="{'active':isActive, 'active2':isActive2}"></div>

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

判断是否绑定一个active

//html
<div :class="{'active':isActive==-1}"></div>

//或者

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

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

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

//第一种（用逗号隔开）
<div :class="{ 'active': isActive, 'sort': isSort }"></div>

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

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

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

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

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

使用计算属性来简化类

第三种（使用computed属性）
<div :class="classObject"></div>

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

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

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

第四种（使用computed属性，根据已知条件添加class）
<div :class="classObject(index)"></div>

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

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

数组形式

//单纯数组 绑定data对象
<div :class="[isActive,isSort]"></div>

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

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

// 前后都可以加静态css类名
<div :class="['sort',isActive ? 'active' : '' ,'sort2' ]"></div>
//或者
<div :class="[isActive?'active':'']"></div>
//或者
<div :class="[isActive==1?'active':'']"></div>
//或者
<div :class="[isActive==index?'active':'']"></div>
//或者
<div :class="[isActive==index?'active':'no-active']"></div>

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

数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
<div :class="[{ active: isActive }, 'sort']"></div>
//或者
<div :class="[{ active: isActive==1 }, 'sort']"></div>
//或者
<div :class="[{ active: isActive==index }, 'sort']"></div>

三目运算符

<div :class="isActive ? 'active' : 'no-active'"></div>
//或者
<div :class="isActive === 1 ? 'active': 'no-active'"></div>
//或者
<div :class="isActive ? 'active' : ''"></div>

到此结束。