綁定 HTML Class
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
內聯樣式在模板里
1 <div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div> 2 <script type="text/javascript"> 3 var vm1 = new Vue({ 4 el: "#div1", 5 data: { 6 isActive: true, 7 hasError: true, 8 } 9 }) 10 </script> 11 12 13 14 // 預覽 15 <div id="div1" class="active text-danger"></div>
內聯樣式不在模板里
1 <div id="div2" :class="class_obj"></div> 2 3 <script type="text/javascript"> 4 var vm2 = new Vue({ 5 el: "#div2", 6 data: { 7 class_obj: { 8 isActive: true, 9 hasError: true, 10 } 11 } 12 }) 13 </script> 14 ———————————————— 15 // 預覽 16 <div id="div2" class="isActive hasError"></div>
綁定返回對象的計算屬性
1 <div id="div3" v-bind:class="classObject"></div> 2 3 <script type="text/javascript"> 4 var vm3 = new Vue({ 5 el: "#div3", 6 data: { 7 isActive: true, 8 error: true 9 }, 10 computed: { 11 classObject: function () { 12 return { 13 active: this.isActive && this.error, 14 'text-danger': this.error 15 } 16 } 17 } 18 }) 19 </script> 20 ———————————————— 21 22 // 預覽 23 24 <div id="div3" class="active text-danger"></div>
數組語法
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：
class 列表
1 <div id="div4" v-bind:class="[activeClass, errorClass]"></div> 2 <script type="text/javascript"> 3 new Vue({ 4 el: "#div4", 5 data: { 6 activeClass: 'active', 7 errorClass: 'text-danger' 8 } 9 }) 10 </script> 11 ———————————————— 12 13 // 預覽 14 15 <div id="div4" class="active text-danger"></div>
class 列表使用三元表達式
如果你也想根據條件切換列表中的 class，可以用三元表達式：
1 <div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 2 <script type="text/javascript"> 3 new Vue({ 4 el: "#div5", 5 data: { 6 isActive: true, 7 activeClass: 'active', 8 errorClass: 'text-danger' 9 } 10 }) 11 </script> 12 ———————————————— 13 14 // 預覽 15 16 <div id="div5" class="active text-danger"></div>
class 列表使用對象語法
1 <div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div> 2 <script type="text/javascript"> 3 new Vue({ 4 el: "#div6", 5 data: { 6 isActive: true, 7 errorClass: 'text-danger' 8 } 9 }) 10 </script> 11 ———————————————— 12 13 // 預覽 14 15 <div id="div6" class="active text-danger"></div>
class 綜合練習
1 <style> 2 .red { 3 color: red; 4 } 5 6 .thin { 7 font-weight: 200; 8 } 9 10 .italic { 11 font-style: italic; 12 } 13 14 .active { 15 letter-spacing: 0.5em; 16 } 17 </style> 18 19 20 21 <body> 22 <div id="app"> 23 <h1 class="red thin">這是一個很大很大的H1，大到你無法想象！！！</h1> 24 25 <!-- 第一種使用方式，直接傳遞一個數組，注意： 這里的 class 需要使用 v-bind 做數據綁定 --> 26 <h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你無法想象！！！</h1> 27 28 <!-- 在數組中使用三元表達式 --> 29 <h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你無法想象！！！</h1> 30 31 <!-- 在數組中使用 對象來代替三元表達式，提高代碼的可讀性 --> 32 <h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你無法想象！！！</h1> 33 34 <!-- 在為 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名，由於 對象的屬性可帶引號，也可不帶引號，所以 這里我沒寫引號； 屬性的值 是一個標識符 --> 35 <h1 :class="classObj">這是一個很大很大的H1，大到你無法想象！！！</h1> 36 37 38 </div> 39 40 <script> 41 // 創建 Vue 實例，得到 ViewModel 42 var vm = new Vue({ 43 el: '#app', 44 data: { 45 flag: true, 46 classObj: { red: true, thin: true, italic: false, active: false } 47 }, 48 methods: {} 49 }); 50 </script> 51 </body>
1 我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表 2 3 <div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div> 4 <script type="text/javascript"> 5 new Vue({ 6 el: "#div4", 7 data: { 8 msg: "我是數組綁定方法", 9 baseStyles: { 10 color: 'green', 11 fontSize: '30px' 12 }, 13 overridingStyles: { 14 'font-weight': 'bold' 15 } 16 } 17 }) 18 </script>