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{ /*這裡寫需要設定的第二種樣式*/ }
image.gif
2. 基本繫結:
<!--vue程式碼--> <div :class="{class_a:isActive}"></div> <!-- 博主在這裡用vue-cli做例子,小夥伴們注意與vue的區別 --> export default { name: "test1", data(){ return{ isActive:true } } } <!-- CSS程式碼 --> .class_a{ /*這裡寫需要設定的樣式*/ }
image.gif
以上可以根據isACtive的值,動態判斷來進行class樣式的繫結。
特別說明:
- 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>
image.gif
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{ /*這裡寫需要設定的第二種樣式*/ }
image.gif
特別說明:
這裡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{ /*這裡寫需要設定的第二種樣式*/ }
image.gif
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{ /*這裡寫需要設定的第二種樣式*/ }
image.gif
style屬性繫結(內聯)
1. 直接設定樣式
<!--vue程式碼--> <div :style="color:selectedColor,fontsize:fontSize + 'px'"></div> <!-- 博主在這裡用vue-cli做例子,小夥伴們注意與vue的區別 --> export default { name: "test1", data(){ return{ selectedColor:pink, fontSize:20 //注意前後名稱的一致性 } } }
image.gif
2. 也可以使用物件
(可以參照上述class)
<!--vue程式碼--> <div :style="styleObject"></div> <!-- 博主在這裡用vue-cli做例子,小夥伴們注意與vue的區別 --> export default { name: "test1", data(){ return{ styleObject{ selectedColor:pink, fontSize:20 } } } }
image.gif
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' }, } } }
image.gif
小夥伴們可根據上述方法結合自身專案情況修改呼叫,如有問題,歡迎及時聯絡博主,也可在下方留言~~