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;
}

效果图

• 动态添加style也是一样

动态style对象：<div :style="{ color: textColor, fontSize: '18px' }">&l