TypechoJoeTheme

Dcr163的博客

统计
标签搜索

vue列表筛选+排序笔记

2021-03-14
/
0 评论
/
196 阅读
/
正在检测是否收录...
03/14

vue列表筛选+排序笔记

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue列表筛选+排序</title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="keyword">
			<ul>
				<li v-for="(val,index) in filterLists" :key="index">{{index}}-{{val.id}}-{{val.name}}-{{val.age}}</li>
			</ul>
			<button @click="ageOrderBy(1)">年龄升序</button>
			<button @click="ageOrderBy(2)">年龄降序</button>
			<button @click="ageOrderBy(0)">年龄原序</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					keyword: '',
					orderBy: 0, //0原序,1升序,2降序
					lists: [{
							'id': 0,
							'name': '小红果',
							'age': 25
						},
						{
							'id': 1,
							'name': '小青果',
							'age': 15
						},
						{
							'id': 6,
							'name': '小青青',
							'age': 11
						},
						{
							'id': 10,
							'name': '小青社',
							'age': 11
						},
						{
							'id': 2,
							'name': '小绿果',
							'age': 18
						},
						{
							'id': 3,
							'name': '小蓝果',
							'age': 16
						},
						{
							'id': 4,
							'name': '小粉果',
							'age': 17
						},
					]
				},
				computed: {
					//关键字筛选
					filterLists() {
						const {
							keyword,
							lists,
							orderBy
						} = this;
						let filterL;
						//过滤
						filterL = lists.filter(function(val) {
							return val.name.indexOf(keyword) > -1
						});
						if (orderBy > 0) {
							//排序 升序
							if (orderBy === 1) {
								filterL.sort(function(val1, val2) {
									return val1.age - val2.age
								})
							} else {
								//排序 降序
								filterL.sort(function(val1, val2) {
									return val2.age - val1.age
								})
							}
						}


						return filterL;
					}
				},
				methods: {
					ageOrderBy(orderBy) {
						this.orderBy = orderBy
					}
				}
			})
		</script>
	</body>
</html>


赞(0)
版权属于:

Dcr163的博客

本文链接:

https://dcr163.cn/414.html(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. admin
    2021-08-15

    {!{data:image/webp;base64,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}!}

标签云