网站模板下载湖南岚鸿网站在线注册免费域名

vue-前端实现模糊查询

开始觉得前端的模糊查询肯定是非常难实现的，但后来发现还是很容易的，几行代码就可以搞定。

原理

从后端获取到所有数据后，将数据存储于两个变量中，目的是为了其中一个作为模糊查询的对照组，用我们在input中输入的值进行比对筛选出符合搜索条件的数据。

代码

备注：无样式，根据需求自己增加

	<inputv-model="searchValue"  //搜索绑定的值placeholder="请输入"@input="search" //这里选择input触发方法：只要值改变即可触发/><view v-for="(item,index) in codeList">{{item.customCode}}</view>

	export default {data() {return {searchValue:'',codeList: [], codeListCache: [],//codeList，codeListCache赋值一样的内容//例如： [{customCode:"1"},{customCode:"11"},{customCode:"12"},{customCode:"1234"},]}},methods: {search(){this.codeList = this.codeListCache.filter(v=>{return v.customCode.indexOf(this.searchValue) >= 0;})//filter()过滤器的方法将筛选后的结果复制给codeList},}}