vue class and style学习（简单记录）

标签：and   obj   value   简单   定义   data   class   leo   inpu   

直接绑定class
:class="自定义名字:如className"
<style>
.c
</style>
data:{
className:‘c‘

}
判断条件是否成功的stylecss
<p>
<span :class="{c:box}">直接绑定class</span>
<input type="checkbox" value="box" id="box" v-model="box"/>
{{box}}
</p>
绑定数组
<style>
.classA{
color: red;
font-size: 30px;
}
.classB{
font-size: 67px;
margin-left: 20px;
margin-top: 30px;
}
</style>
<p>
<span :class="[classA,classB]">绑定数组</span>
<input type="checkbox" value="boxs" id="boxs" v-model="boxs"/>
{{boxs}}
</p>
data:{
boxs:true,
classA:‘classA‘,
classB:‘classB‘,
}
三元
<span :class="变量:条件1?条件2">绑定数组</span>
:style="color:red"
data:{
red:"color",
}

绑定对象的
:style="styleobject"
data:{

styleobject:{
css相关代码
}

}

vue class and style学习（简单记录）

标签：and   obj   value   简单   定义   data   class   leo   inpu   

原文地址：http://www.cnblogs.com/mhxy13867806343/p/7064319.html