目录
1.使用watch属性实现列表过滤
2.使用计算属性实现列表过滤
3.总结
这一小节我们来讲一下Vue的列表过滤，那么想要完成列表过滤就需要有两个关键的步骤：
1.获取用户输入
2.根据用户输入信息进行匹配
针对获取用户输入这一步，我们就需要使用v-model,使用双向绑定，这样用户的输入就可以实时的反馈到数据层。
而针对用户信息匹配这一步，最标准的写法应该是使用计算属性去写，但是针对初学者来说可能想不到这么深，初学者可能最开始的想法是这样的只有用户输入的内容发生变化的时候才会进行过滤匹配，所以就要监听这种变化，那么就要使用watch,接下来我们先用watch开发一下。
1.使用watch属性实现列表过滤
我们使用watch去监视keyword的变化，这个时候问题就来了，大家都知道，watch是有两种写法的，一种是完整写法，需要在配置对象中写handler,还有一种写法就比较简单，keyword直接就写成一个函数。我们平时在写的时候，尽量都用简单的写法，如果场景复杂了，再由简单的写法进行扩充为复杂写法。没必要专门去记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字模糊搜索" v-model="keyword">
<ul>
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}} -- {{p.age}} -- {{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
keyword:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPersons:[]
},
methods: {
},
watch:{
keyword(newword,oldword){
this.filPersons = this.persons.filter((p)=>{
return p.name.indexOf(newword) !== -1
})
}
}
})
</script>
</html>
实现效果：
我们这里使用了 filPersons作为中间数据存放，避免了直接改动原数据，而且在watch中，使用了数组的filter方法，做了数据过滤。但是我们可以看到一个问题，就是由于一开始这个监视方法是不执行的，所以我们在开始的时候，是看不到原来的数据的。所以为了解决这个问题，我们可以使用immediate属性，让这个监视一开始就执行一次。这样我们就可以在一开始就能看到全部的数据了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字模糊搜索" v-model="keyword">
<ul>
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}} -- {{p.age}} -- {{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
keyword:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
],
filPersons:[]
},
methods: {
},
watch:{
keyword:{
immediate:true,
handler(newword,oldword){
this.filPersons = this.persons.filter((p)=>{
return p.name.indexOf(newword) !== -1
})
}
}
}
})
</script>
</html>
实现效果：
2.使用计算属性实现列表过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字模糊搜索" v-model="keyword">
<ul>
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}} -- {{p.age}} -- {{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
keyword:'',
persons:[
{id:'001',name:'马冬梅',age:19,sex:'女'},
{id:'002',name:'周冬雨',age:20,sex:'女'},
{id:'003',name:'周杰伦',age:21,sex:'男'},
{id:'004',name:'温兆伦',age:22,sex:'男'}
]
},
methods: {
},
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyword) !== -1
})
}
}
})
</script>
</html>
实现效果：
3.总结
通过上面两种方法的实现，我们可以看到计算属性的实现方式明显要优于监视属性watch,所以这里就再次验证了我们之前的章节中讲到的，当计算属性computed和监视属性watch都可以实现的时候，优先使用计算属性。
