1. 直接传递一个数组class 注意：这里的class需要使用 v-bind 做数据绑定 ``` <h1 v-bind:class="['red','under']">VUE教程</h1> ``` 2. 在数组中使用三元表达式 ``` <h1 :class="[flag?'red':'under']">VUE教程</h1> ``` 或 ``` <h1 :class="flag? 'red':'under'">VUE教程</h1> ``` 3. 在数组中使用对象来代替三元表达式，提高代码可读性 ``` <h1 :class="[{'red':flag}]">VUE教程</h1> ``` 4. 在为class使用 v-bind 绑定对象时，对象是的属性是类名，由于对象的属性可带或不带引号，所以没写；属性值 是一个标识符 写法1： ``` <h1 :class="{ red:true, under:false}">Vue教程</h1> ``` 写法2： ``` <h1 :class="classObj">Vue教程</h1> ``` ``` var vm = new Vue({ el: '#app', data: { flag: true, classObj: { red: true, under: true } } }) ```