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
<li v-for="(item,index) of filPerons" :key="index">对computed计算属性不了解的可以查查。说明白就是filPersons这个玩意直接会执行并且返回值。而这里返回的是一个新的数组。所以可以在页面渲染。
完整代码如下：
<!DOCTYPE html>
<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>
</html>