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'
      }
    }
  },