在第六節《教你如何在html中綁定數據》的章節中，我們學會了如何給視圖上的html標簽綁定屬性。

比如，給?<a>?標簽綁定href屬性，簡單回憶一下：

<!-- v-bind指令 -->
<a v-bind:href="link"></a>

<!-- v-bind的縮寫 -->
<a :href="link"></a>

我們用?v-bind?指令（以后都用縮寫的形式）來動態綁定一個標簽的屬性。

而這一節，我們特意來學習一下樣式的動態綁定，因為它與普通屬性的綁定略有不同，并且在實際開發中，動態綁定樣式是一定會用到的知識，所以，還是值得我們用一個章節來學習一下它。

老辦法，我們先來準備一個vue實例：

<div id="app">
?? <p>這是文字</p>
</div>
<script>
??? //創建一個實例vm
??? const vm = new Vue({
??????? el:"#app",
??????? data:{}
??? });
</script>

綁定class

對象語法：我們動態綁定的class的值是一個對象{ }，具體怎么寫我們來看看，在上面的代碼上稍做修改：

<div id="app">
?? <p :class="{'active':isActive}">這是文字</p>
</div>
<script>
??? //創建一個實例vm
??? const vm = new Vue({
??????? el:"#app",
??????? data:{
??????????? isActive:true
??????? }
??? });
</script>

我們看到給class綁定的是一個對象：{ ‘active’ : isActive }，isActive是我們vm實例的數據，值為true，這與我們平時看到的class是一個字符串值不一樣，這種寫法，最后會被渲染成什么樣呢？

我們運行看看渲染后的效果：

咦？class的值最后被渲染成：“active”，原來，在對象中，若該屬性對應的value為true，則該屬性會被渲染出來，為false，則被渲染出來。

我們盡快驗證一下，我們在上面的代碼上再稍作修改：

<p :class="{
??????? 'active':isActive,
??????? 'danger':isDanger,
??????? 'error':isError
}">這是文字</p>

我們給class綁定的對象多了2個key和value，我們看看實例的數據data：

data:{
??? isActive:true,
??? isDanger:true,
??? isError:false
}

isActive和isDanger的值都為true，isError都為false，猜一下，渲染出來的結果是什么？

看效果：

正和我們所預測的一樣，值為true的會被成功渲染出來，為false的則不會被渲染出來。這個時候，你就可以根據需要給渲染出來的class編寫樣式了。

一旦vm實例對應的數據發生變化，比如isActive的值由true變成false，視圖上的’active’ 類也會被刪除，這樣就會實現動態綁定樣式啦！

除了對象語法來綁定class之外，我們還有另一種寫法。

數組語法：用數組語法和對象語法來綁定class，又稍有不同。說了是數組語法，那寫法就肯定不一樣，我們繼續來看看：

<p :class="[activeClass,errorClass]">
??? 這是文字
</p>

這個時候，class綁定的值就是一個數組了，數組有兩個元素[ activeClass , errorClass ]，它們對應的值是vm實例的數據data，我們看看vm的數據data：?

data:{
??? activeClass:'active',
??? errorClass:'error'
}

渲染的時候，activeClass和errorClass對應的值就會被渲染成class。看效果圖：

效果跟我們預期一樣。這樣，我們就可以修改vm實例的數據data，來實現動態修改class的樣式了。

綁定內聯樣式style

除了使用class類以外，我們還可以在style內聯樣式上下功夫。

綁定內聯樣式也有2種語法，對象語法和數組語法，但我們這里只介紹常用的對象語法。?

<p :style="{color:colorStyle}">
? 這是文字
</p>?

這個時候，我們綁定的就不是class了，是style屬性。它的值是一個對象：{ color:colorStyle }，同樣，我們來看看vm實例的數據data：

data:{
??? colorStyle:'red'
}?

原來colorStyle我們vm實例的數據，值為red。那是不是我們style中的color對應的顏色是就是red呢？

沒錯，看來你已經會舉一反三了。?看渲染效果，我們驗證一樣：

沒毛病，成功渲染成：style=”color:red”。?

因此，我們同樣可以修改vm實例的數據data，來實現動態修改視圖央視的效果。?

本節小結

采取動態綁定class還是動態內聯樣式style，這個要根據需求分析來具體確定。但較為常用的還是使用綁定class。

擴展閱讀

?1.《ECMAScript 6 系列》原創教程

總結

以上是生活随笔為你收集整理的第十一节：动态绑定class和style的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。