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

最新推荐文章于 2024-07-06 21:38:14 发布

hellotqq

最新推荐文章于 2024-07-06 21:38:14 发布

阅读量2.1k

点赞数 6

分类专栏：前端 vue

原文链接：https://blog.csdn.net/qq_42991509/article/details/106187117

版权

前端同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

需求描述

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

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

定义好需要的样式：

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