在我们平常的前端开发中少不了对DOM的操作，以及样式的动态控制，那我们在使用vue的时候该如何灵活的绑定class呢
1.最简单一个class绑定
v-bind:class设置一个对象，可以动态地切换class
例如：
<div id="app">
<div :class ="{ 'active':isActive }"></ div>
</div>
<script>
new Vue({
el :'#app',
data: {
isActive: true
}
})
</script>
最终渲染结果为=====><div class="active"></div>
2对象中也可以传入多个属性，来动态切换class，同时class也可以与:class共存，看下面代码↓
<div id="app">
<div class="title" :class ="{ 'active':isActive, 'addcolor':isAdd }"></ div>
</div>
<script>
new Vue({
el :'#app',
data: {
isActive: true,
isAdd: true
}
})
</script>
最终渲染结果为=====><div class="title active addcolor"></div>
3.当class需要绑定比较多，而且逻辑比较复杂时，我们可以给:class的值绑定一个计算属性，看代码↓
<div id="app">
<div :class ="finalclass"></ div>
</div>
<script>
new Vue({
el :'#app',
data: {
isActive: true,
isAdd: true,
error: true
},
computed: {
return {
'active': this.isActive && this.isAdd,
'error': this.eroor
}
}
})
</script>
最终渲染结果为=====><div class="active error"></div>
4.我们也可以给:class绑定数组格式，以及在数组里再加逻辑，看代码↓
<div id="app">
<div :class ="[ {'active': isActive }, errorShow ]"></div>
</div>
<script>
new Vue({
el :'#app',
data : {
isActive : true ,
errorShow : 'error'
}
})
</script>
最终渲染结果为=====><div class="active error"></div>
5.再来看一种组合式使用方法，看下面代码↓
<div id="app">
<button :class ="finalclass"></button>
</div>
<script>
new Vue({
el :'#app',
data: {
size: 'large',
disabled: true
},
computed: {
finalclass: function (){
return [
'btn',
{
[ 'btn-' + this.size ]: this.size !== '',
[ 'btn-disabled']: this.disabled
}
]
}
}
})
</script>
最终渲染结果为=====><button class ="btn btn-large btn-disabled"></button>
6.绑定内联样式
<div id="app">
<div :style ="finalstyle"></div>
</div>
<script>
new Vue({
el :'#app',
data: {
finalstyle: {
color: 'blue',
fontSize: 16+'px'
//这里css属性的名称用驼峰命名或短横线分割命名
}
}
})
</script>
最终渲染结果为=====><div style="color: blue; font-size: 16px;"></div>
应用多个样式对象时，也可以使用数组语法：
<div :style="style1, style2">123</div>
----------------------------------------------------