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

Posted 2020-09-24

直接绑定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相关代码
}

}