vue三种模糊查询方式代码实例
作者：我心向阳.
这篇文章主要给大家介绍了关于vue三种模糊查询方式的相关资料,在vue中模糊搜索主要是用computed属性实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前两种模糊查询根据输入的值直接查询（效果如图）
最后一种模糊查询通过点击按钮查询（视情况定）
模糊查询方式一(计算属性)
<template>
<div>
<input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="请输入查找">
<table>
<tbody>
<tr v-for="(item,index) in filterList" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
keyWord: '',
list:[
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' }
]
}
},
computed:{
filterList(){
return this.list.filter(item=>{
return item.name.indexOf(this.keyWord)!==-1 || item.age.indexOf(this.keyWord)!==-1
})
}
}
}
</script>
<style>
</style>模糊查询方式二(监听属性)
<template>
<div>
<input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="请输入查找">
<table>
<tbody>
<tr v-for="(item,index) in filterList" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
keyWord: '',
filterList:[],
list:[
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' }
],
}
},
watch:{
keyWord:{
//立即监听
immediate:true,
//监听输入值发生改变时把过滤的数据赋值给新数组
handler(val){
this.filterList = this.list.filter(item=>{
return item.name.indexOf(this.keyWord) !==-1 || item.age.indexOf(this.keyWord) !== -1
})
}
}
}
}
</script>
<style>
</style>模糊查询方式三(点击按钮搜索查询)
<template>
<div>
<input type="text" v-model="keyWord" style="border: 1rpx solid gray;" placeholder="请输入查找">
<table>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
<button @click="search" style="width: 200rpx;background-color: #3CA0F6;">查询</button>
</div>
</template>
<script>
export default {
data() {
return {
keyWord: '',
list:[
{ name: '张三', age: '18' },
{ name: '张四', age: '17' },
{ name: '张五', age: '17' },
{ name: '老六', age: '18' },
{ name: '老八', age: '18' },
{ name: '小三', age: '19' },
{ name: 'Xingyue', age: '18' }
],
}
},
methods: {
search() {
//获取输入的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰
let _keyWord = this.keyWord.toLowerCase();
let newList = [];
if (_keyWord) {
this.list.filter(item => {
if (
item.name.toLowerCase().indexOf(_keyWord) !== -1 ||
item.age.toLowerCase().indexOf(_keyWord) !== -1
) {
newList.push(item);
}
});
}
this.list = newList;
},
}
}总结
到此这篇关于vue三种模糊查询方式的文章就介绍到这了,更多相关vue模糊查询方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！