代码实例（watch）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!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>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="请输入信息" v-model="KeyWord">
<ul v-for="(p,index) in fillist">
<li>{{p.name}}-{{p.age}}-{{p.gender}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data() {
return {
KeyWord:'',
lists:[
{name:'Louis',age:'18',gender:'male'},
{name:'Louis1',age:'182',gender:'male'},
{name:'Louis2',age:'182',gender:'female'}
],
fillist:[]
}
},
watch:{
KeyWord:{
immediate:true,
handler(val){
this.fillist =this.lists.filter((p)=>{
return p.name.indexOf(val) !== -1
})
}
}
}
})
</script>
</html>
|
代码实例(computed)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <!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>
<script src="/js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="请输入信息" v-model="KeyWord">
<ul v-for="(p,index) in fillist">
<li>{{p.name}}-{{p.age}}-{{p.gender}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data() {
return {
KeyWord:'',
lists:[
{name:'Louis',age:'18',gender:'male'},
{name:'Louis1',age:'182',gender:'male'},
{name:'Louis2',age:'182',gender:'female'}]
}
},
computed:{
fillist(){
return this.lists.filter((p)=>{
return p.name.indexOf(this.KeyWord) !== -1
})
}
}
})
</script>
</html>
|
分析Vue的片段（分两种方法）
第一种：watch(监视方法)
1.检测输入的关键字是否发生改变（在这里需要提前设定KeyWord(进行双向绑定)）
2.通过数组过滤的filter方法对设定数据p进行过滤
3.最后返回值通过indexOf判断是否包含输入的值（如果不包含会返回-1）
第二种：computed(计算属性)
计算属性大致方法与监视属性一致（详细见代码）
