vue中通过v-bind绑定元素的class属性为元素设置样式
程序员文章站
2022-05-15 18:17:55
...
1,直接传递一个数组
<style>
.mcolor{
color:red;
}
.mweight{
font-weight: 200;
}
.msize{
font-size:30px;
}
</style>
<h4 v-bind:class="['mcolor','msize','mweight']">这是一个h4标签,用来测试vue中的class样式的</h4>
2,数组中运用三元表达式
<h4 v-cloak v-bind:class="['mcolor','mweight',istrue?'msize':'']">{{msg}}</h4>
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个h4标签,用来测试vue中的class样式的",
istrue:false
}
})
3,数组中嵌套对象(它比三元表达式的数据可读性更好一些)
<h4 v-cloak v-bind:class="['mcolor','mweight',{'msize':istrue}]">{{msg}}</h4>
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个h4标签,用来测试vue中的class样式的",
istrue:false,
classobj:{mcolor:true,mweight:true,msize:true}
}
})
4,直接使用对象
(1)
<h4 v-cloak v-bind:class="{mcolor:false,mweight:true,msize:true}">{{msg}}</h4>
(2)
<h4 v-cloak v-bind:class="classobj">{{msg}}</h4>
var vm=new Vue({
el:"#app",
data:{
msg:"这是一个h4标签,用来测试vue中的class样式的",
istrue:true,
classobj:{mcolor:true,mweight:true,msize:true}
}
})
上一篇: vue属性绑定和style