vue-前端实现模糊查询

vue-前端实现模糊查询

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

原理

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

代码

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

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

	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
				
			},

		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21