在第六節的章節中，我們學會了如何給檢視上的html標籤繫結屬性。比如，給 <a> 標籤繫結href屬性，簡單回憶一下：

1. <!-- v-bind指令 -->
   
2. <a v-bind:href="link"></a>
   
3. <!-- v-bind的縮寫 -->
   
4. <a :href="link"></a>

複製程式碼我們用 v-bind 指令（以後都用縮寫的形式）來動態繫結一個標籤的屬性。而這一節，我們特意來學習一下樣式的動態繫結，因為它與普通屬性的繫結略有不同，並且在實際開發中，動態繫結樣式是一定會用到的知識，所以，還是值得我們用一個章節來學習一下它。

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

1. <div id="app">
   
2.    <p>這是文字</p>
   
3. </div>
   
4. <script>
   
5.     //建立一個例項vm
   
6.     const vm = new Vue({
   
7.         el:"#app",
   
8.         data:{}
   
9.     });
   
10. </script>

複製程式碼

繫結class

物件語法：我們動態繫結的class的值是一個物件{ }，具體怎麼寫我們來看看，在上面的程式碼上稍做修改：

1. <div id="app">
   
2.    <p :class="{'active':isActive}">這是文字</p>
   
3. </div>
   
4. <script>
   
5.     //建立一個例項vm
   
6.     const vm = new Vue({
   
7.         el:"#app",
   
8.         data:{
   
9.             isActive:true
   
10.         }
    
11.     });
    
12. </script>

複製程式碼我們看到給class繫結的是一個物件：{ ‘active’ : isActive }，isActive是我們vm例項的資料，值為true，這與我們平時看到的class是一個字串值不一樣，這種寫法，最後會被渲染成什麼樣呢？我們執行看看渲染後的效果：咦？class的值最後被渲染成：“active”，原來，在物件中，若該屬性對應的value為true，則該屬性會被渲染出來，為false，則被渲染出來。

我們儘快驗證一下，我們在上面的程式碼上再稍作修改：

1. <p :class="{
   
2.         'active':isActive,
   
3.         'danger':isDanger,
   
4.         'error':isError
   
5. }">這是文字</p>
   

複製程式碼我們給class繫結的物件多了2個key和value，我們看看例項的資料data：

1. data:{
   
2.     isActive:true,
   
3.     isDanger:true,
   
4.     isError:false
   
5. }

複製程式碼isActive和isDanger的值都為true，isError都為false，猜一下，渲染出來的結果是什麼？看效果：正和我們所預測的一樣，值為true的會被成功渲染出來，為false的則不會被渲染出來。這個時候，你就可以根據需要給渲染出來的class編寫樣式了。一旦vm例項對應的資料發生變化，比如isActive的值由true變成false，檢視上的’active’ 類也會被刪除，這樣就會實現動態繫結樣式啦！
除了物件語法來繫結class之外，我們還有另一種寫法。陣列語法：用陣列語法和物件語法來繫結class，又稍有不同。說了是陣列語法，那寫法就肯定不一樣，我們繼續來看看：

1. <p :class="[activeClass,errorClass]">
   
2.     這是文字
   
3. </p>

複製程式碼這個時候，class繫結的值就是一個數組了，陣列有兩個元素[ activeClass , errorClass ]，它們對應的值是vm例項的資料data，我們看看vm的資料data：

1. data:{
   
2.     activeClass:'active',
   
3.     errorClass:'error'
   
4. }

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

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

繫結內聯樣式style

除了使用class類以外，我們還可以在style內聯樣式上下功夫。
繫結內聯樣式也有2種語法，物件語法和陣列語法，但我們這裡只介紹常用的物件語法。

1. <p :style="{color:colorStyle}">
   
2.    這是文字
   
3. </p>

複製程式碼這個時候，我們繫結的就不是class了，是style屬性。它的值是一個物件：{ color:colorStyle }，同樣，我們來看看vm例項的資料data：

1. data:{
   
2.     colorStyle:'red'
   
3. } 
   

複製程式碼原來colorStyle我們vm例項的資料，值為red。那是不是我們style中的color對應的顏色是就是red呢？
沒錯，看來你已經會舉一反三了。 看渲染效果，我們驗證一樣：

004.png (29.59 KB, 下載次數: 0)

下載附件

2017-5-9 15:48 上傳

沒毛病，成功渲染成：style=”color:red”。
因此，我們同樣可以修改vm例項的資料data，來實現動態修改檢視央視的效果。

本節小結

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