标签：vue wordColor 梳理 30px height 添加 基础知识 class 属性

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。