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

最新推荐文章于 2023-07-18 20:30:35 发布

一键写代码

最新推荐文章于 2023-07-18 20:30:35 发布

阅读量4.4k

点赞数 7

分类专栏： vue 前端技术积累

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

版权

前端技术积累同时被 2 个专栏收录

160 篇文章 9 订阅

订阅专栏

vue

89 篇文章 7 订阅

订阅专栏

需求描述

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

解决方式

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

定义好需要的样式：

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