搜索栏模糊过滤数据

2023-12-03 16:35:40

第一种方式是watch监听实现

模板语法

 <div id="root">
    <h2>人物信息</h2>
    <input type="text" placeholder="请输入名字" v-model='keyword'>
    <ul>
      <!-- 数组形式第一个接受的是数据，第二个是索引 -->
      <li v-for="(value,index) in filPersons" :key=index.id> {{value.name}}--{{value.age}}--{{value.sex}}</li>

    </ul>
  </div>

vue实例内代码

 new Vue({
      el: '#root',
      data: {
        keyword: '',
        persons: [
          { id: '001', name: '马冬梅', age: 18, sex: '女' },
          { id: '002', name: '周冬雨', age: 19, sex: '女' },
          { id: '003', name: '周杰伦', age: 20, sex: '男' },
          { id: '004', name: '温兆伦', age: 21, sex: '男' },
        ],
        filPersons: []
      },
      watch: {
        keyword: {
          immediate: true,
          handler(val) {
            this.filPersons = this.persons.filter((value) => {
              // 空字符串可以匹配到任何数据
              return value.name.indexOf(val) !== -1
            })
          }
        }
      }
    })

watch总结：

①：input绑定的是一个空串，刚开始没输入任何数据默认情况下是拿空串匹配数据再进行页面渲染，空串是可以匹配到所有数据，但是监听是要等到数据改变才能执行；怎么解决，加上一个immediate: true属性，
这个属性的意思就是，代码执行，数据没有修改的情况下，过滤器会先执行一遍，最终达到效果就代码运行所有数据都会在页面渲染出来。
②：这里是加入了一个filPersons空数组，页面最终也是从filPersons拿数据，因为不能直接拿原数据进行修改展示，这里把原数组过滤后的数据交给了filPersons，最终再展示过滤后的数据

computed实现

一般能用computed实现的watch都能实现，不能用computed实现的watch也能实现，比如异步操作、定时器回调、ajax回调函数等；
但要是两种方式都能实现的前提下，建议使用comouted，因为代码更简洁，更少，更容易理解。

 // 使用computed实现
    new Vue({
      el: '#root',
      data: {
        keyword: '',
        persons: [
          { id: '001', name: '马冬梅', age: 18, sex: '女' },
          { id: '002', name: '周冬雨', age: 19, sex: '女' },
          { id: '003', name: '周杰伦', age: 20, sex: '男' },
          { id: '004', name: '温兆伦', age: 21, sex: '男' },
        ],

      },
      computed: {
        filPersons() {
          // 第一个return返回的是filPersons的最终返回结果
          return this.persons.filter((value) => {
            // 第二个return返回的是过滤器的返回结果
            return value.name.indexOf(this.keyword) !== -1
          })
        }
      }

    })

在刚开始没有输入任何查询条件下，会拿空串匹配到所有数据展示

输入查询条件

总结：拿到过滤结果的过程就是这些代码：

 this.filPersons = this.persons.filter((value) => {
              // 空字符串可以匹配到任何数据
               return value.name.indexOf(val) !== -1
             })

啥意思：①：原数组通过输入的条件过滤后得到的结果给filPersons
②：原数据(交给filPersons那一份，刚开始空串匹配所有的数据交给filPersons这一份)，拿着匹配输入的条件，如果匹配，会展示出来

码农公寓