Vue实现列表过滤与排序的两种方法

 用侦听属性实现列表过滤：

<div id="APP">
	<input type="text" v-model="keyWord">
	<ul>
		<li v-for="(item,index) of newList" :key="item.id">
			{{item.name}} - {{item.age}} - {{item.sex}}
		</li>
	</ul>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			// keyWord 用于接收用户输入的内容
			keyWord:"",
			// 原始数据列表，用于过滤，不可更改
			list:[
				{id:1, name:"马冬梅", age:30, sex:"女"},
				{id:2, name:"周冬雨", age:18, sex:"女"},
				{id:3, name:"周杰伦", age:26, sex:"男"},
				{id:4, name:"温兆伦", age:24, sex:"男"}
			],
			// 过滤后的数据列表，用于渲染页面
			newList:[]
		}
	},
	watch:{
		// 监听 keyWord 数据变化，当用户输入时进行操作
		keyWord:{
			// 初始化时执行一下，避免页面加载时 newList 中没有数据
			immediate:true,
			handler(val){
				// 利用 filter 方法让 newList 等于过滤后的数据列表
				this.newList = this.list.filter((item) => {
					// 利用 indexOf 方法返回条件成立的数据
					return item.name.indexOf(val) !== -1;
				})
			}
		}
	}
});

注：filter 方法不归 Vue 管理，所以要写成箭头函数的形式。

 

 用计算属性实现列表过滤【推荐】：

<div id="APP">
	<input type="text" v-model="keyWord">
	<ul>
		<li v-for="(item,index) of newList" :key="item.id">
			{{item.name}} - {{item.age}} - {{item.sex}}
		</li>
	</ul>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			// keyWord 用于接收用户输入的内容
			keyWord:"",
			// 原始数据列表，用于过滤，不可更改
			list:[
				{id:1, name:"马冬梅", age:30, sex:"女"},
				{id:2, name:"周冬雨", age:18, sex:"女"},
				{id:3, name:"周杰伦", age:26, sex:"男"},
				{id:4, name:"温兆伦", age:24, sex:"男"}
			]
		}
	},
	computed:{
		// 计算一个新的数据列表，用于渲染页面
		newList(){
			// 返回过滤后的数据列表
			return this.list.filter((item) => {
				return item.name.indexOf(this.keyWord) !== -1;
			})
		}
	}
});

 用计算属性实现列表排序：

<div id="APP">
	<input type="text" v-model="keyWord">
	<button @click="sortType = 2">年龄升序</button>
	<button @click="sortType = 1">年龄降序</button>
	<button @click="sortType = 0">原顺序</button>
	<ul>
		<li v-for="(item,index) of newList" :key="item.id">
			{{item.name}} - {{item.age}} - {{item.sex}}
		</li>
	</ul>
</div>

const vm = new Vue({
	el: "#APP",
	data(){
		return {
			keyWord: "",
			// 0 表示原顺序、1 降序、2 升序
			sortType: 0,
			list:[
				{id:1, name:"马冬梅", age:30, sex:"女"},
				{id:2, name:"周冬雨", age:18, sex:"女"},
				{id:3, name:"周杰伦", age:26, sex:"男"},
				{id:4, name:"温兆伦", age:24, sex:"男"}
			]
		}
	},
	computed:{
		newList(){
			// 因为需要排序过滤之后的数据，所以不能直接返回
			const arr = this.list.filter((item) => {
				return item.name.indexOf(this.keyWord) !== -1;
			})
			// 判断 sortType 是否不为 0，不为 0 表示需要排序
			if(this.sortType){
				arr.sort((min,max) => {
					// 1 表示降序，从大到小。2 表示升序，从小到大
					if(this.sortType === 1){
						return max.age - min.age;
					}else{
						return min.age - max.age;
					}
				})
			}
			return arr;
		}
	}
});

 原创作者：吴小糖

 创作时间：2023.3.14