Several common ways for Vue to dynamically bind Class

1. Dynamically bind multiple class names (by object binding)

Example 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
   }
}

Example 2:

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

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

2. Binding through an array

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

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

3. Ternary operation: binding through expressions

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

data() {
  return {
       tabIndex:false
  }
}