vue-列表过滤和排序

这篇博客探讨了在Vue应用中如何实现列表的过滤和排序。首先介绍了利用计算属性`computed`进行列表过滤的方法,并给出了有无输入值时的不同效果。接着,详细讲解了如何根据对象的`age`属性进行升序和降序排序,通过点击按钮来切换不同的排序状态。
摘要由CSDN通过智能技术生成

1. 列表过滤

运用了Vue实例化的 computed (计算属性)

例子:

	<div id="test">
	        <input type="text" v-model='searchName'>
	        <ul>
	            <li v-for= "(p,index) in filterP":key="index">
	                {
  {index}}--{
  {p.name}}--{
  {p.age}}
	            </li>
	        </ul>
	        <button>年龄升序</button>
	        <button>年龄降序</button>
	        <button>原本顺序</button>
	    </div>
	    
	    <script src="./vue.js"></script>
	    <script>
	        new Vue({
	            el : '#test',
	            data :{
	                searchName:"",
	                persons:[
	                        {name : 'tom',age:18},
	                        {name : 'tzh',age:19},
	    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值