<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种使用方式，直接传递一个数组，注意：这里的 class 需要使用 v-bind 做数据绑定-->
<!-- <h1 :class="['red', 'thin', 'italic']">大大的H1</h1> -->
<!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="[flag?'active':'', 'thin', 'italic']">大大的H1</h1> -->
<!-- 在数组中使用对象来代替三元表达式，提高代码可读性 -->
<!-- <h1 :class="['thin', 'italic', {'active': flag}]">大大的H1</h1> -->
<!-- 在为 class 使用 v-bind 绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里没写引号，属性的值是一个标识符 -->
<h1 :class="classObj">大大的H1</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
classObj: { red:true, thin: true, italic: false, active: false }
},
methods: {
}
})
</script>
</body>
使用v-bind绑定class改变样式
['red', 'thin', 'italic']：直接传递一个数组，数组中的元素用引号括起来，会在style中寻找样式- 三元表达式
[flag?'active':'', 'thin', 'italic']：元素不加引号，会在Vue实例的data属性中寻找值 - 在数组中使用对象
['thin', 'italic', {'active': flag}]：在Vue实例的data属性中寻找flag的值，根据flag的值决定是否加上active类名 - 为 class 使用 v-bind 绑定对象：对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里没写引号，属性的值是一个标识符