class
.a{
border:2px solid red;
}
.b{
background: darkmagenta;
}
data:{
title:"class && style 动态绑定 ",
flagA:true,
classObj:{
b:true,
c:true
},
isA:'a',
isC:'c',
id:1901,
styleObj:{
border:"2px solid green"
},
current:0
},
<div id="box" class="a b c" ></div> //正常书写方式
<div id="box" :class="{a:flagA,c:true}" ></div>//传入一个字面量 条件 属性名为 样式的名字(class)
<div id="box" :class="classObj" ></div>//{b:true,c:true} 传入一个字面量
<div id="box" :class="[isA,isC]" ></div>//数组 传入类名
<div id="box" :class="id==1901?'a':'c'" ></div> //三目运算
style
<div id="box" :style="{borderRadius:'40%',backgroundColor:'yellow'}"></div>
<div id="box" :style="styleObj"></div>//传入字面量
styleObj:{
border:"2px solid green"
},