Vue列表过滤_yui.entitylist.filter

作者：Guff_9hys | 2024-07-21 16:32:36

踩

yui.entitylist.filter

问题提出：模糊搜索，搜“冬”出现“马冬梅、周冬雨”

实现方式1：watch属性


<body>
	<div id="div1">
		<input type="text" name="" v-model="word">
		<li v-for='(p,i) of filp' :key=i>
			{{p}}
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 
	new Vue({
		el:"#div1",
		data:{
			word:"",
			persons:[
				{id:"001",name:"马冬梅"},
				{id:"002",name:"周冬雨"},
				{id:"003",name:"周结论"},
				{id:"004",name:"某某论"}
			],
			filp:[]
		},
		watch:{
			word:{
				immediate:true,
				handler(value){
					this.filp=this.persons.filter((p)=>{
						return p.name.indexOf(value)!==-1
					})
				}
			}
		}
	})
</script>

实现方式2：computed属性（更简单，能用computed尽量用）


<body>
	<div id="div1">
		<input type="text" name="" v-model="word">
		<li v-for='(p,i) of filp' :key=i>
			{{p}}
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 
	new Vue({
		el:"#div1",
		data:{
			word:"",
			persons:[
				{id:"001",name:"马冬梅"},
				{id:"002",name:"周冬雨"},
				{id:"003",name:"周结论"},
				{id:"004",name:"某某论"}
			],
			
		},
		computed:{
			filp(){
				return this.persons.filter((p)=>{
					return p.name.indexOf(this.word)!==-1
				})
			}
		}
	})
</script>

3.对返回结果过按照年龄排序


computed:{
			filp(){
				const arr= this.persons.filter((p)=>{
					return p.name.indexOf(this.word)!==-1
				})
                if(this.isSort){
                    arr.sort((p1,p2)=>{
                        return p1.age-p2.age
                    })
                }
                return arr
			}
		}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/861486