使用class样式
1. 数组
```
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
<body>
<style>
.red{
color: red;
}
.find{
font-style: italic;
}
</style>
<!-- 使用v-bind 来绑定class属性 -->
<div class="box">
<h1 :class="['red','find']">这是一个大大的h1</h1>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
classel:[
]
}
});
</script>
</body>```
2. 数组中使用三元表达式
```
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
<body>
<style>
.red{
color: red;
}
.find{
font-style: italic;
}
</style>
<!-- 使用v-bind 来绑定class属性 -->
<div class="box">
<!-- 使用三元运算符绑定 -->
<!-- 首先在vm对象data数据中 添加一个变量，isfind=true，h1中isfind?'find':''
isfind 是变量 不用加引号，find是样式 要加引号记住 -->
<h1 :class="['red',isfind?'find':'']">这是一个大大的h1</h1>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
isfind:false
}
});
</script>
</body>```
3. 数组中嵌套对象
```
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
```
<div class="box">
<!-- 数组中嵌套对象 -->
<!-- 在数组中直接写一个{}对象，其中‘find’：isfind 是样式find，如果是true
就应用vm data中的isfind，否则不应用
-->
<h1 :class="['red',{'find':isfind}]">这是一个大大的h1</h1>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
isfind:true
}
});
</script>
</body>4. 直接使用对象
```
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
<div class="box">
<!-- 直接使用对象 -->
<!-- 在Vue对象中，data中直接写上样式的名称 -->
<!-- 也可以写成 <h1 :class="{find:true,red:ture}">这是一个大大的h1</h1> -->
<h1 :class="classobj">这是一个大大的h1</h1>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
classobj:{
red:true,find:true
}
}
});
```