p31列表过滤
最终效果:
拿监视(侦听)属性写:
版本一:
<body>
<!--准备好一个容器-->
<div id="root">
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="p in persons" :key="p.id">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
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: '003', name: '温兆伦', age: 22,sex:'男' }
]
},
watch:{
keyWord(val){
this.persons=this.persons.filter((p)=>{
return p.name.indexOf(val) !==-1
})
}
}
})
</script>
版本二:
<body>
<!--准备好一个容器-->
<div id="root">
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="p in filPersons" :key="p.id">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
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: '003', name: '温兆伦', age: 22,sex:'男' }
],
filPersons:[]
},
watch:{
keyWord(val){
this.filPersons=this.persons.filter((p)=>{
return p.name.indexOf(val) !==-1
})
}
}
})
</script>
</body>
有个小问题就是刚开始的时候什么也不显示。
解决方案:
在watch里面加:
immediate:true
功能:立即实现
用watch实现的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title></title>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
<li v-for="p in filPersons" :key="p.id">
{{p.name}}-{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
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: '003', name: '温兆伦', age: 22, sex: '男' }
],
filPersons: []
},
watch: {
keyWord: {
immediate: true,
handler(val) {
this.filPersons = this.persons.filter((p) => {
return p.name.indexOf(val) !== -1
})
}
}
}
})
</script>
</body>
</html>
插播:随便折叠代码
#region
…
#endregion
用计算属性实现的代码:
computed:{
filPersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord)!==-1
})
}
}
p32列表排序
sort:
computed:{
filPersons(){
const arr= this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord)!==-1
})
//判断一下是否需要排序
if(this.sortType){
arr.sort((a,b)=>{
return this.sortType===1?b.age-a.age:a.age-b.age
})
}
return arr
}
}