The first two fuzzy queries are directly queried according to the input value (the effect is shown in the figure)
The last kind of fuzzy query is queried by clicking the button (depending on the situation)
Fuzzy query method 1 (calculated attribute)
<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>Fuzzy query method 2 (monitoring attribute)
<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>Fuzzy query method three (click the button to search and query)
<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;
},
}
}