这篇文章主要介绍Vue样式切换及三元判断样式是如何关联的，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
假设有需求：
后台返回状态1:启用，0：禁用
1、若要使启用为绿色，禁用不添加其他样式
<el-table-column
prop="statusName"
align="center"
label="状态">
<template slot-scope="scope">
<div :class="{active:scope.row.status==1}">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
.active{
color:green;
}1、若要使启用为绿色，禁用为红色，可使用三元表达式绑定样式
<el-table-column
prop="statusName"
align="center"
label="状态">
<template slot-scope="scope">
<div :class="scope.row.status==1? 'active':'native'">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
.active{
color:green;
}
.native{
color:red;
}补充知识：vue通过判断写样式(v-bind)
如下所示：
v-bind:
以上是Vue样式切换及三元判断样式是如何关联的的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注天达云行业资讯频道！