Vue.js中使用过滤器（filters）详解，附案例

最新推荐文章于 2024-01-05 10:00:00 发布

原创最新推荐文章于 2024-01-05 10:00:00 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Vue 专栏收录该内容

32 篇文章

订阅专栏

博客介绍了在Vue项目中遇到的问题：接口返回多种情况，但仅需展示一种。解决方案是利用Vue的filters过滤器进行数据过滤，但在使用中发现filters内的this不是Vue实例。为了解决这个问题，作者通过在data中定义that变量并将Vue实例的this赋值给that，然后在过滤器内使用that来访问Vue实例的数据，成功实现了数据的正确过滤和展示。

项目场景：

接口数据返回了对应某种情况判断的所有内容，而业务展示只需要展示其中的一种情况，这样就需要前端自己判断一下，过滤处理。

解决方案：

注意：vue 中的filters过滤器this指向并不是vue 中的this，而是undefined，要让this获取vue中data的数据,操作如下

<template>
  <div class="filters">
	<!--filtersText是要过滤的值，传递给filtersLabel对象 -->
    <div>{{filtersText | filtersLabel}}</div>
  </div>
</template>
<script>
// 全局注册that
  let that;
  export default {
    data() {
      // 将this赋值给that，供下面过滤器使用
      that = this;
      return {
        arrayList: [
          {
            "key": "1",
            "value": "苹果"
          },
          {
            "key": "2",
            "value": "香蕉"
          },
          {
            "key": "3",
            "value": "橙子"
          },
          {
            "key": "4",
            "value": "猕猴桃"
          }
        ],
        filtersText: '1',
      }
    },
    filters: {
      filtersLabel: function (dataStr) {
        let arrayList = that.arrayList;
        let value = '没有水果';
        for (let i of arrayList) {
          if (i.key == dataStr) {
            value = i.value;
            break;
          }
        }
        return value;
      }
    }
  }
</script>