Vue 动态绑定Class常用的几种方式

1.动态绑定多个类名（通过对象绑定 ）

举例1：

// 动态绑定类名： 当tabIndex=0 时绑定‘card y_card’类名，以此类推
<view 
:class="{ 'card y_card':tabIndex==0, 'card j_card':tabIndex==1,'card':tabIndex==2 }">
</view>

data() {
   return {
      tabIndex：0
   }
}

举例2：

// 当state为‘标签一’时绑定one类名，为‘标签二’时绑定two类名
<view :class="{ 'one': item.state=='标签一' , 'two': item.state=='标签二' }"></view>

data() {
   return {
      item：{ state: '标签一' }
   }
}

2.通过数组绑定

<view :class=" [ item.state1, item.state2 ]"></view>

data() {
    return {
    	<!--给view同时绑定了active、active-color两个类名-->
        item：{ state1: 'active'，state2: 'active-color' }
    }
}

3.三元运算：通过表达式绑定

 <view :class="tabIndex==true ? 'status1':'status2' "></view >

data() {
  return {
       tabIndex:false
  }
}