vue中通过v-bind绑定元素的class属性为元素设置样式
1，直接传递一个数组
>
.mcolor{
color:red;
}
.mweight{
font-weight: 200;
}
.msize{
font-size:30px;
}
这是一个h4标签，用来测试vue中的class样式的
2,数组中运用三元表达式
{{msg}}
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个h4标签，用来测试vue中的class样式的",
istrue:false
}
})
【vue中通过v-bind绑定元素的class属性为元素设置样式】3,数组中嵌套对象（它比三元表达式的数据可读性更好一些）
{{msg}}
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个h4标签，用来测试vue中的class样式的",
istrue:false,
classobj:{mcolor:true,mweight:true,msize:true}
}
})
4,直接使用对象
(1)
{{msg}}
(2)
{{msg}}
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个h4标签，用来测试vue中的class样式的",
istrue:true,
classobj:{mcolor:true,mweight:true,msize:true}
}
})
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募