1：举个例子，用户有4个数据，我们想在输入框搜索后，能让数据从原来的4条数据变成只显示出和我们输入相关的数据。 即实现如下图这样的效果：
2：思路上怎么实现呢？首先第一步我们应该想到用v-model 拿到用户的输入： 就像这样：这里通过keyWord 已经拿到了用户的输入
<div id="root">
<h2>用户</h2>
<input type="text" placeholder="请输入" v-model="keyWord">
<ul>
<li v-for="(item,index) of perons" :key="index">
{{item.name}}---{{item.age}}---{{item.sex}}
</li>
</ul>
</div>
那么此时data中的keyWord就会随着用户输入而有对应的值。
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'1',name:'张三丰',age:19,sex:'男'},
{id:'2',name:'张晓雨',age:20,sex:'女'},
{id:'3',name:'王晓明',age:28,sex:'男'},
{id:'4',name:'王大熊',age:32,sex:'男'}
]
}
})
那么接下来就是想着把输入的值和已经有的数据进行对比，如果有一样的字段的数据，那么这些数据就是我们想重新渲染到页面的数据。
这里我们用到数组的filter方法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组
以及indexOf方法
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果代码在数组中没找到指定元素则返回 -1。
代码如下：
computed:{
filPerons(){
return this.persons.filter((item)=>{
return item.name.indexOf(this.keyWord) !== -1
})
}
}
此时应该把一开始遍历显示的persons数组改为新的数组filPersons
完整代码如下：
<html>
<head>
<meta charset="UTF-8" />
<title>列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>用户</h2>
<input type="text" placeholder="请输入" v-model="keyWord">
<ul>
<li v-for="(item,index) of filPerons" :key="index">
{{item.name}}---{{item.age}}---{{item.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
keyWord:'',
persons:[
{id:'1',name:'张三丰',age:19,sex:'男'},
{id:'2',name:'张晓雨',age:20,sex:'女'},
{id:'3',name:'王晓明',age:28,sex:'男'},
{id:'4',name:'王大熊',age:32,sex:'男'}
]
},
computed:{
filPerons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
</script>
模糊搜索 不区分大小写 且去除重复数据
dataListFil () {
let keyword = this.foodName.toLowerCase();
return this.dataList.filter((result,index,self) =>
index==self.findIndex((item) => {
return item.productId==result.productId&&item.nameCn==result.nameCn &&item.nameCn.toLowerCase().indexOf(keyword)>-1
})
)
}
