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;
  }