vue基础知识梳理(二)
作者:互联网
vue基础知识梳理(二)
1. vue中v-bind:class动态添加class
总结:动态添加class,需要给:class=“对象”,对象中value为true,则key作为class名添加;value为false,则添加失败
- 方案一:直接在html结构中给class一个对象
//html
<div class="btn" :class="{wordColor:false,wordSize:true}" >点我</div>
//样式
.btn{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background: cornflowerblue;
}
.wordColor{
color: crimson;
}
.wordSize{
font-size: 24px;
}
效果
- 方案二:使用计算属性返回对象
//html
<div class="btn" :class="classname" >点我</div>
//计算属性
computed:{
//返回一个对象给class,对象中属性值为true的属性,属性名被添加到class名中
classname(){
return{
wordColor:true,
wordSize:false
}
}
}
//样式
.btn{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background: cornflowerblue;
}
.wordColor{
color: crimson;
}
.wordSize{
font-size: 24px;
}
效果图
标签:vue,wordColor,梳理,30px,height,添加,基础知识,class,属性 来源: https://blog.csdn.net/GTbond/article/details/122455212