在項目中，我們時常會遇到動態的去綁定操作切換不同的CSS樣式，結合自身項目中遇到的一些情況，也參考了一些文檔，針對vue.js樣式的動態綁定切換做出如下小結：

動態切換的核心思想：

利用vue指令v-bind來實現動態綁定，從而設置切換不同的樣式～

vue的最大特點是數據驅動，利用特殊的語法將DOM“綁定”到底層數據，DOM與數據保持同步，每當數據發生變化，DOM視圖就會做出相應的更新和響應，正是基于這種特性，我們得以實現class和style的動態綁定～

（一定要充分理解數據驅動的含義，共勉～）

特別說明：

1. v-bind在處理class和style時，專門增強了它。表達式的結果類型不僅可以是字符串，還可以是對象和數組。

v-bind用于綁定屬性和數據 ，其縮寫為“ : ” 也就是v-bind:id === :id 。

根據不同的項目需求和不同的實現思路，現初步總結了如下方法：

（歡迎小伙伴們補充添加，一起進步～～）

class屬性綁定

1. 三目元算符方式：

<!--vue代碼-->    <ul>      <li v-for="item in itemData" :key="item">        <i :class="item.isA ? 'class_a' : 'class_b'"></i>       </li>    </ul> <!-- CSS代碼 -->  .class_a,.class_b{    /*這里可以寫一些公共樣式*/  }  .class_a{    /*這里寫需要設置的第一種樣式*/  }  .class_b{    /*這里寫需要設置的第二種樣式*/  }

2. 基本綁定：

<!--vue代碼-->  <div :class="{class_a:isActive}"></div><!-- 博主在這里用vue-cli做例子，小伙伴們注意與vue的區別 -->  export default {    name: "test1",    data(){      return{        isActive:true      }    }  }<!-- CSS代碼 -->  .class_a{    /*這里寫需要設置的樣式*/  }

以上可以根據isACtive的值，動態判斷來進行class樣式的綁定。

特別說明：

1. vue 的分隔符默認是 {{ }}, 在分隔符里面的字符串會被認為是數據變量，可以通過 class="{{ className }}" 方式設置class，但是vue不推薦這種方式與 v-bind:class 的方式混用，二者只能選其一。

2. v-bind:class 雖然與class屬性里綁定變量的方式不能共存，卻可以與原生的class特性共存，即 一個DOM標簽中允許同時出現原生class和v-bind:class。

3. 為了避免不必要的問題，要寫在data中的值盡量不要用中劃線，可以采用下劃線～如果data中用中劃線的話，需要加單引號，否則出錯，而且，在v-bind中使用時，也需要加單引號。加上單引號又無法識別數據，默認為true。
3. 可以傳入多個屬性動態切換多個class

<!--vue代碼-->    <div :class="{class_a:isActive,class_b:isActive_b}"></div>