<body>
<div id="root">
<h1>清單過濾</h1>
<input type="text" v-model="word">
<ul>
<li v-for="(p,id) in npersons" :key="p.id">
{{p.name}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data() {
return {
word:"",
persons:[
{id:001,name:"孫悟空",age:18},
{id:002,name:"王二",age:19},
{id:003,name:"氣球",age:22},
{id:004,name:"警官",age:26},
],
// newPersons:[]
}
},
// 通過計算屬性的清單渲染
computed: {
npersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.word)!==-1
})
}
}
</script>
</body>
<body>
<div id="root">
<h1>清單過濾</h1>
<input type="text" v-model="word">
<ul>
<li v-for="(p,id) in newPersons" :key="p.id">
{{p.name}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data() {
return {
word:"",
persons:[
{id:001,name:"孫悟空",age:18},
{id:002,name:"王二",age:19},
{id:003,name:"氣球",age:22},
{id:004,name:"警官",age:26},
],
newPersons:[]
}
},
watch:{
word:{
immediate:true,
handler(vul){
this.newPersons=this.persons.filter(p=>{
return p.name.indexOf(vul)!==-1
// 經包含的vul過濾出來}
})}
},
}
})
</script>
</body>
<body>
<div id="root">
<h1>清單過濾</h1>
<input type="text" v-model="word">
<button @click="sortType=0">原序</button>
<button @click="sortType=1">年齡降序</button>
<button @click="sortType=2">年齡升序</button>
<ul>
<li v-for="(p,id) in npersons" :key="p.id">
{{p.name}},{{p.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data() {
return {
word:"",
persons:[
{id:001,name:"孫悟空",age:18},
{id:002,name:"王二",age:19},
{id:003,name:"氣球",age:22},
{id:004,name:"警官",age:26},
],
sortType:0
// 0表示原序，1表示年齡降序，2表示年齡升序
}
},
// 通過計算屬性的清單渲染
computed: {
npersons:function(){
const newP=this.persons.filter((p)=>{
return p.name.indexOf(this.word)!==-1
})
if(this.sortType){
newP.sort((a,b)=>{
return this.sortType==1?b.age-a.age:a.age-b.age
})
}
return newP
}
}
})
</script>
</body>
