vue之根据不同的值绑定不同的class样式类名

需求描述

有时候，我们需要根据不同的数据，来展示不同的效果。

解决方式

方法一： 使用绑定函数返回值实现

定义好需要的样式：

.online {
  color: #07c160;
  font-weight: bold;
}
.offline {
  color: #ff976a;
  font-weight: bold;
}

 <div
   v-for="(item, index) in list"
    :key="index"
    class="item-wrap"
  >
	 <div class="item-name">{{ item.name }}</div>
     <div class="item-tag" :class="addClass(item.status)">
        {{ item.status | typeFilter }}
      </div>
 </div>

在methods中定义addClass函数

    addClass(i) {
      switch (i) {
        case 0:
          return 'online';
        case 1:
          return 'offline'
      }
    },

方法二： 利用filters实现

 <div
   v-for="(item, index) in list"
    :key="index"
    class="item-wrap"
  >
	 <div class="item-name">{{ item.name }}</div>
     <div class="item-tag" :class="item.status | classFilter">
        {{ item.status | typeFilter }}
      </div>
 </div>

然后在filters中定义

  filters: {
    classFilter(i) {
      switch (i) {
        case 0:
          return 'online';
        case 1:
          return 'offline'
      }
    }
  },