這篇文章主要介紹了Vue.js樣式動態綁定實現小結，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在項目中，我們時常會遇到動態的去綁定操作切換不同的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>
4. 對象綁定
<!--vue代碼-->
<div ：class="classObject"></div>
<!-- 博主在這裏用vue-cli做例子，小夥伴們注意與vue的區別 -->
export default {
name: "test1",
data(){
return{
classObject:{
class_a:true,
class_b:true
}
}
}
}
<!-- CSS代碼 -->
.class_a{
/*這裏寫需要設置的第一種樣式*/
}
.class_b{
/*這裏寫需要設置的第二種樣式*/
}
特別說明：
這裏v-bind直接利用對象進行綁定，需注意對象中的鍵名應與class樣式名保持一致。
5. 數組綁定
數組裏的變量改變時，動態更新class列表
<!--vue代碼-->
<div ：class="[classA,classB]"></div>
<!-- 博主在這裏用vue-cli做例子，小夥伴們注意與vue的區別 -->
export default {
name: "test1",
data(){
return{
classA:'class_a',
classB:'class_b'
}
}
}
<!-- CSS代碼 -->
.class_a{
/*這裏寫需要設置的第一種樣式*/
}
.class_b{
/*這裏寫需要設置的第二種樣式*/
}
6. 綁定返回對象的計算屬性
強大且常用的模式～
<!--vue代碼-->
<div v-bind="classObject"></div>
<!-- 博主在這裏用vue-cli做例子，小夥伴們注意與vue的區別 -->
export default {
name: "test1",
data(){
return{
isActive:true
}
},
computed:{
classObject:function () {
return{
class_a:this.isActive,
class_b:!this.isActive
// 這裏要結合自身項目情況修改填寫
}
}
}
}
<!-- CSS代碼 -->
.class_a{
/*這裏寫需要設置的第一種樣式*/
}
.class_b{
/*這裏寫需要設置的第二種樣式*/
}
style屬性綁定（內聯）
1. 直接設置樣式
<!--vue代碼-->
<div ：style="color：selectedColor,fontsize:fontSize + 'px'"></div>
<!-- 博主在這裏用vue-cli做例子，小夥伴們注意與vue的區別 -->
export default {
name: "test1",
data(){
return{
selectedColor:pink,
fontSize:20
// 注意前後名稱的一致性
}
}
}
2. 也可以使用對象
（可以參照上述class）
<!--vue代碼-->
<div ：style="styleObject"></div>
<!-- 博主在這裏用vue-cli做例子，小夥伴們注意與vue的區別 -->
export default {
name: "test1",
data(){
return{
styleObject{
selectedColor:pink,
fontSize:20
}
}
}
}
3. 使用數組
<!--vue代碼-->
<div :style="[styleA,styleB]"></div>
<!-- 博主在這裏用vue-cli做例子，小夥伴們注意與vue的區別 -->
export default {
name: "test1",
data(){
return{
styleA:{
color:'red',
fontSize: '30px'
},
styleB:{
color:'green',
fontSize: '15px'
},
}
}
}
小夥伴們可根據上述方法結合自身項目情況修改調用，如有問題，歡迎交流
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。