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
小夥伴們可根據上述方法結合自身專案情況修改呼叫，如有問題，歡迎及時聯絡博主，也可在下方留言～～