重点:splice() filter() sort() indexOf()
<template>
<div>
<input type="text" v-model="searchP">
<ul>
<li v-for="(person,index) in filterPersons" :key="index">
{{index}}---{{person.name}}--{{person.age}}
<button @click="deleteP(index)">删除</button>
<button @click="updateP(index,{'name':'dage',age:12})">更新</button>
</li>
</ul>
<button @click="setOrderType(1)">升序</button>
<button @click="setOrderType(2)">降序</button>
<button @click="setOrderType(0)">原来排序</button>
</div>
</template>
<script>
export default {
name: "testTwo",
data(){
return{
searchP:'',
orderType:0,
persons:[{
name:'kai',
age:8
},{
name:'kenan',
age:44
},{
name:'fanzhang',
age:90
},{
name:'libai',
age:34
}]
}
},
methods:{
deleteP(index){
this.persons.splice(index,1)
},
updateP(index,person){
this.persons.splice(index,1,person)
},
setOrderType(value){
this.orderType = value;
}
},
computed:{
filterPersons(){
const {searchP,persons,orderType} = this;
let filterPP =persons.filter(p=>p.name.indexOf(searchP)>=0)
if (orderType!==0){
filterPP.sort(function (p1,p2) {
//1是升序 2是降序
if (orderType===1){
return p1.age-p2.age;
}else {
return p2.age-p1.age;
}
})
}
return filterPP;
}
}
}
</script>
<style scoped>
</style>