kankan(good)

列表过滤的两种实现方式(watch和computed)

2023-02-22  本文已影响0人  扶得一人醉如苏沐晨

方式一

watch方式实现

data中

      // 后端返回的数据总和
      tatalList: [],
      // 前端过滤之后的list
      showList: [],

watch中

 watch: {
    keyWord: {
      // 这个是关键,初始化的时候立即触发
      // 保证showList为totalList
      immediate: true,
      handler(val) {
        this.showList = this.totalList.filter(
          (item) => item.name.indexOf(val) !== -1
        );
      },
    },
  },

方式二 computed实现

 // 计算属性数据过滤
  computed: {
    showList() {
      return this.totalList.filter(
        (item) => item.name.indexOf(this.keyWord) !== -1
      );
    },
  },
上一篇 下一篇

猜你喜欢

热点阅读