假设有需求:假设有需求:后台返回状态1:启用,0:禁用1、若要使启用为绿色,禁用不添加其他样式

prop="statusName"

align="center"

label="状态">




.active{
color:green;
}

prop="statusName"

align="center"

label="状态">




.active{
color:green;
}1、若要使启用为绿色,禁用为红色,可使用三元表达式绑定样式

prop="statusName"

align="center"

label="状态">




.active{
color:green;
}
.native{
color:red;
}

prop="statusName"

align="center"

label="状态">




.active{
color:green;
}
.native{
color:red;
}补充知识:vue通过判断写样式(v-bind)补充知识:补充知识:vue通过判断写样式(v-bind)如下所示:
v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"
v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"以上这篇Vue 样式切换及三元判断样式关联操作就是小编分享给大家的全部内容了,希望能给大家一个参考。