Vue样式切换及三元判断样式是如何关联的

这篇文章主要介绍Vue样式切换及三元判断样式是如何关联的,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>假设有需求:

后台返回状态1:启用,0:禁用

1,若要使启用为绿色,禁用不添加其他样式

 & lt; el-table-column
　　支持=皊tatusName"
　　align=癱enter"
　　标签=白刺?在
　　& lt;模板slot-scope=皊cope"祝辞
　　& lt; div:类=皗活跃:scope.row.status==1}“比;
　　{{scope.row。statusName}}
　　& lt;/div>
　　& lt;/template>
　　& lt;/el-table-column>
　　.active {
　　颜色:绿色;
　　}

1,若要使启用为绿色,禁用为红色,可使用三元表达式绑定样式

 & lt; el-table-column
　　支持=皊tatusName"
　　align=癱enter"
　　标签=白刺?在
　　& lt;模板slot-scope=皊cope"祝辞
　　& lt; div:类=皊cope.row.status==1, # 63;& # 39;活跃# 39;:& # 39;本地# 39;“比;
　　{{scope.row。statusName}}
　　& lt;/div>
　　& lt;/template>
　　& lt;/el-table-column>
　　.active {
　　颜色:绿色;
　　}
　　.native {
　　颜色:红色;
　　}

<>强vue通过判断写样式(v-bind)

如下所示:

v-bind:

以上是vue样式切换及三元判断样式是如何关联的的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

Vue样式切换及三元判断样式是如何关联的