实现模糊查询
需要回顾computed：要求得到一个新的数组，使用计算属性处理当值变化computed重新执行
Computed实现模糊查询
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
<meta charset="UTF-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="firstVue">
<h1>模糊查询</h1>
查询：<input type="text" v-model="keyworld">
<ul>
<!--这里调用computed的属性初始会调用一次返回data数组的过滤数组-->
<li v-for="(p,index) in changeperson" :key="p.id">
{{p.name}}-{{p.age}}-{{index}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
let v=new Vue({
el:"#firstVue",
data:{
keyworld:'',
person:[
{id:1,name:"张岱",age:18},
{id:2,name:"张子",age:18},
{id:3,name:"张而",age:18}
]
},
computed:{
changeperson(){
//返回一个过滤数组
return this.person.filter(p=>{
//过滤的条件是：模糊查询/因为每次关联的值keyworld变化时候就会重新调用computed
return p.name.indexOf(this.keyworld)!=-1;
})
}
}
})
console.log(v)
</script >
</html>
实现排序
在原来的返回值上进行排序处理
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
<meta charset="UTF-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="firstVue">
<h1>升序降序</h1>
<button @click="sortkey = 1">升</button>
<button @click="sortkey = 2">降</button>
<button @click="sortkey = 0">原来</button>
<ul>
<!--这里调用computed的属性初始会调用一次返回data数组的过滤数组-->
<li v-for="(p,index) in changeperson" :key="p.id">
{{p.name}}-{{p.age}}-{{index}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
let v=new Vue({
el:"#firstVue",
data:{
keyworld:'',
sortkey:0,
person:[
{id:1,name:"张岱",age:18},
{id:2,name:"张子",age:14},
{id:3,name:"张而",age:22}
]
},
computed:{
changeperson(){
//返回一个过滤数组
const arr = this.person.filter(p=>{
//过滤的条件是：模糊查询/因为每次关联的值keyworld变化时候就会重新调用computed
return p.name.indexOf(this.keyworld)!=-1;
})
//判断得到的数组是不是需要排序
if(this.sortkey!=0){
arr.sort((a, b)=>{
return this.sortkey === 1 ? a.age-b.age:b.age-a.age
})
}
//最后记得返回数组
return arr
}
}
})
console.log(v)
</script >
</html>