绑定 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>