watch模糊查询(通过搜索框内容展示符合内容,不调用接口)

最新推荐文章于 2022-11-29 10:00:53 发布

原创最新推荐文章于 2022-11-29 10:00:53 发布 · 833 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #webview #vue #es6

本文介绍了如何在Vue.js应用中使用watch监听器来实现实时搜索功能。通过监听search属性的变化，利用filter方法过滤数据，动态更新显示的内容。这种方法确保了原始数据的完整性，同时提供了高效的搜索体验。

watch可以记录一个数据改变之前和之后,并且可以在改变发生时写入事件.利用搜索框内数据改变,把搜索框内新产生的关键词使用watch来搜索数据.

html代码(展示样式,不放了,你能搜这个肯定把展示框写好了)

<input v-model="search"></input>

js代码:

data() {
    return{
      search:'',     //input绑定的查询关键词
      files:[],      //被查询数据
      filesShow:[]   //查询事件发生时要展示的数据你需要for循环展示的数据,自己对应自己的
    }
  },
  watch:{
    search(New,Old){ //检测search变化New为search变化后内容,Old为search变化前内容
      this.filesShow = this.files.filter(item => {   //使用ES6的filter将原来的数组过滤成一个新数组展示,新数组出现是为了方便改变数组而且不会动到原来的数据。避免导致查询后让被查数据产生改变
        return item.content.indexOf(New) != -1  //indexof方法,直接用,content为对象内要被查询的key名
      })
      console.log(this.filesShow)
      console.log(this.files)
    }
  }


//尽量使用箭头函数,否则函数内无法使用this,导致你的数据无法抛出