列表搜索和排序

最新推荐文章于 2024-10-29 09:34:03 发布

原创最新推荐文章于 2024-10-29 09:34:03 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

vue的学习专栏收录该内容

22 篇文章

订阅专栏

这篇博客探讨了在不改变原始数据的情况下，如何通过创建计算属性来展示过滤或排序后的数组。这种方式确保了对原始数组的保护，同时提供动态更新的视图。

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染-搜索和排序</title>
		<!--
		1列表过滤
		2列表排序
		
	
		-->
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="demo">
			<input type="text"  v-model="searchName"/>
			<ul>
				<li v-for="(p , index) in filterPersons" :key="index"><!--为了给 Vue 一个提示，
				以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性-->
					{{index}}---{{p.name}}----{{p.age}}
				</li>
			</ul>
			
			
			<button type="button" @click="setOrderType(1)">年龄升序</button>
			<button type="button"  @click="setOrderType(2)">年龄降序</button>
			<button type="button" @click="setOrderType(0)">原来顺序</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					searchName:'',
					orderType: 0,//0原本顺序,1升序,2降序
					persons:[
						{name: 'jack', age: 12},
						{name: "bob", age: 8},
						{name: 'alice', age: 20}
					]
				},
				computed:{
					filterPersons(){
						//取出相关数据
						const{searchName,persons,orderType} = this;
						//最终需要显示的数组
						let fPersons;
						//对persons进行过滤
						fPersons = persons.filter(p => p.name.indexOf(searchName) !== -1);
						//p.name中包含输入的searchName,返回的不是-1则过滤给新数组.
						
						
						//排序
						if(orderType !=0){
							fPersons.sort(function(p1,p2){//如果返回负数,
							if(orderType === 1)
								return p1.age-p2.age;
							if(orderType === 2)
							   return p2.age-p1.age;
							})
						}
						return fPersons;
					}
					
				},
				methods:{
					setOrderType(orderType){
						this.orderType = orderType;
					}
				}
				
			})
			
			
		</script>
	</body>
</html>

在这里插入图片描述