⼗五、css样式class的多种⽤法
1、操作HTML元素的class列表和内联样式是数据绑定的⼀个常见需求。
2、所以Vue可以通过⽤v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接⿇烦且易错。
因此，在将v-bind⽤于class和style时，Vue做了专门的增强。
3、表达式结果的类型除了字符串之外，还可以是对象或数组。
（1）表达式结果的类型是对象
1>对象语法：<div :class="{active:true}">class样式</div>
2>可以在对象中传⼊更多字段，来动态切换多个class。
3>v-bind:class指令，也可以与普通的class属性共存。<div :class="{active:true,'my-box':isBox}">class样式<div>
4>绑定的数据对象不必内联定义在模板⾥，在data⽅法⾥⾯定义⼀个对象也可以。
5>也可以在这⾥绑定⼀个返回对象的computed计算属性，这是⼀个常⽤且强⼤的模式。<div :class="objClassComp">class样式
<div>
(注意：objClassComp是⼀个⽅法名⽽不是对象名。它是Vue实例的computed计算属性下的⼀个⽅法，必须有返回值，在这⾥返回值必须是对象)。
(推荐这种写法)
（2）表达式结果的类型是数组
1>数组语法：<div :class="[activeClss,myBox]">class样式</div>
2>根据条件切换列表中的class，可以⽤三元表达式。<div :class="[isActive?activeClass:'', myBox]">class样式</div>
3>在数组语法中也可以使⽤对象语法。<div :class="[{activeClass:true},myBox]">class样式</div>
<style>
.
active{
color: brown;
}
.divBox{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.div-font{
font-size: large;
}
</style>
<template v-if='false'><!--2(5)绑定⼀个返回对象的computed计算属性，这是⼀个常⽤且强⼤的模式。（推荐这种写法）-->
<div :class='objClassComp'>css样式class的多种⽤法</div>
</template>
<script>
let data={
isActive:true,
isDivBox:true
};
computed:{
objClassComp(){//2(5)、绑定⼀个返回对象的computed计算属性，这是⼀个常⽤且强⼤的模式。
return{
'active':this.isActive,//注意通过改变data数据，可以实现动态改变class样式
'divBox':this.isDivBox,
'div-font':true
}
}
}
</script>
css常用模板