1.首先要定义样式
.red{color: red;}
.green{ color: green;}
.blue{background: blue;}
2.数组里的red是data对象里面的red变量,值‘red’是我们定义的样式,多个以,隔开
<div id="box"> <strong :class="[red]">文字...</strong> </div>
new Vue({ el:'#box', data:{ red:'red', b:'blue' }, methods:{} });
3.判断true/false(以定义好的样式的class名称为变量)
<div id="box"> <strong :class="{green:true,blue:true}">文字...</strong> </div>
4.同上判断true/false(以定义好的样式的class名称为变量,在data里面定义变量控制true、false)
data:{ a:true, b:false }, <div id="box"> <strong :class="{red:a,blue:b}">文字...</strong> </div>
5.以json数据形式
data:{ json:{ red:true, blue:true } }, <div id="box"> <strong :class="json">文字...</strong> </div>