vue 使用 watch 监听 computed计算属性实现本地搜索及升序排序

最新推荐文章于 2024-08-30 11:48:05 发布

原创最新推荐文章于 2024-08-30 11:48:05 发布 · 737 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

js 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中使用watch监听和计算属性来实现本地数据的模糊搜索，并根据用户需求进行排序。通过监听keyValue的变化，过滤persons数组，将匹配的项存入filPersons。同时，利用计算属性filPersons，不仅完成过滤，还实现了根据type字段进行升序或降序排序的功能。

一，watch 监听实现模糊搜索

1.本地数据

2，js 代码

 watch: {
    keyValue: {
      immediate: true, // 页面初始化时候执行, keyValue 为 undefined 将 filPersons = persons
      handler(val) {
        // 拿到 oldValue 做过滤 和 persons 数组中的值做一个比对
        // 将拿到的值重新赋值给 filPersons
        this.filPersons = this.persons.filter(item => {
          return item.name.indeOf(val) !== -1
        })
      }
    }
  },

二，用计算属性实现本地模糊搜索及排序

computed: {
    filPersons() {
      // 原理与监听一致
      const arr = this.persons.filter(item => {
        return item.name.indeOf(val) !== -1
      })
      // 判断是否需要排序
      if(type) {
        // 利用数组的 sort 方式排序
        arr.sort((a, b) => {
          return this.type == 1 ? b.age-a.age : a.age-b.age
        })
      }
      return arr // 将 arr 得到的结果返回给 filPersons
    }
  }