Vue Style Switching and Ternary Judgment Style Association Operation

Assuming there is a demand:

Background Return Status 1: Enabled, 0: Disabled

1. To enable green, disable without adding other styles

 <el-table-column
  prop="statusName"
  align="center"
  label=" Status ">
  <template slot-scope="scope">
  <div :class="{active:scope.row.status==1}">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
 .active{
 color:green;
 }

1. To enable green and disable red, you can use the 3 yuan expression binding style

 <el-table-column
  prop="statusName"
  align="center"
  label=" Status ">
  <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;
 }

Additional knowledge: vue by judging the writing style (v-bind)

As shown below:

v-bind:style="$index % 2 > 0?'background-color:#FFF;':'background-color:#D4EAFA;'"