vue 动态设置class

总结：

1：保持一个固定类名，根据变量用三元运算符补充其它的

<div class="button" :class="flag?'btn-active':''">
  我是一个按钮
</div>

2：比较复杂的判断条件可以放在methods里

效果图 动态class.png

这个功能其实可以直接使用el-table里的属性。。。但我不大会哈哈哈哈哈哈哈这个样子我觉得更清晰~~
html↓

      <el-table-column label="排名" align="center" min-width="60">
        <template slot-scope="scope">
          <div  class="ranking-cell" :class="rankingCell(scope.row.ranking)">{{scope.row.ranking}}</div>
        </template>
      </el-table-column>

methods↓

    rankingCell(ranking) {
      if(ranking === 1) {
        return 'rank first';
      } 
      if(ranking === 2) {
        return 'rank second';
      }
      if(ranking === 3) {
        return 'rank third'
      }
    }

style↓

.ranking-cell {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
}
.rank {
  font-weight: bold;
  color: white;
}
.first {
  background-color: #FFC831;
}
.second {
  background-color: #FF6868;
}
.third {
  background-color: #FFAF88;
}