前言
操作元素的 class 樣式列表和 style 內聯樣式為資料繫結是前端開發中一個常見的需求，這些樣式都屬於元素的屬性 attribute ，因此我們可以通過 v-bind 來動態繫結元素的樣式屬性。本文來總結一下這兩個屬性相關的知識點，便於日後的複習學習。
正文
1.class的動態繫結
（1）物件語法，即class動態繫結一個物件。
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<div id="app">
<!-- 繫結html clas樣式 -->
<div :class="{red:isRed,green:isGreen}">物件語法1</div>
<div :class="classObj1">物件語法2</div>
<div :class="classObj2">物件語法3</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
isRed: true,
isGreen: false,
classObj1: {
red: true,
green: false,
},
}
},
computed: {
classObj2() {
return {
red: true,
green: false,
}
},
},
})
</script>
執行結果如下：
對於物件語法1：class 繫結一個字面量型別的物件值，其中 red 屬性值為 true，green 屬性值為 false ，最終結果為綁定了red類選擇器的樣式。
對於物件語法2和語法3：class 繫結一個物件的名，並非具體的物件的值，該鍵名對應了具體的物件value值，該物件的 red 屬性為true，green屬性為false，最終結果為綁定了red型別選擇器的樣式，語法2和語法3的區別在於物件的宣告在計算屬性還是data中。
（2）陣列語法，即class動態繫結一個數組型別
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<div id="app">
<!-- 繫結html clas樣式 -->
<div :class="[classRed,classGreen]">陣列語法1</div>
<div :class="[isRed?'red':'']">陣列語法2</div>
<div :class="classArr">陣列語法3</div>
<div :class="[{red:isRed},classGreen]">陣列中物件混合用法</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
isRed: true,
isGreen: false,
classRed: "red",
classGreen: "green",
classArr:["red","green"],
}
}
}) </script>
執行結果如下：
對於陣列語法1：class繫結一個數組值，其中陣列中的元素代表每一個類選擇器的樣式，最終繫結結果為red和green選擇器的樣式，當color樣式重複，頁面渲染後面的樣式，顏色為綠色。
對於陣列語法2：class繫結一個數組值，只有一個元素，第一個元素由條件表示式確定。樣式渲染如上。
對於陣列語法3：class繫結一個數組名，並非具體的陣列值，該名對應了具體的陣列 value 值。
對於陣列語法4：class繫結一個數組，陣列中第一個元素為一個物件，不難理解。
（3）程式碼中常用的樣式繫結
<style>
.red {
color: red;
}
</style>
<div id="app">
<div :class="isRed?'red':''">程式碼中常用class繫結</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
isRed: true,
}
}
})
</script>
執行結果如下：
2.style的動態繫結
<div id="app">
<!-- 繫結內聯樣式 -->
<div :style="{color:styleRed}">物件語法1</div>
<div :style="styleObj1">物件語法2</div>
<div :style="styleObj2">物件語法3</div>
<div :style="[styleObj1]">陣列語法</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
styleRed: "red",
styleObj1: {
color: "red"
}
}
},
computed: {
styleObj2() {
return {
color: "red"
}
}
},
})
</script>
執行結果如下：
style動態繫結樣式，不需要再style標籤中新增對應的類選擇器，和原生js修改css樣式十分接近。
寫在最後
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。
