Vue 知识点：列表排序

<div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyword"/><button @click="sortType == 2">年龄升序</button><button @click="sortType == 1">年龄降序</button><button @click="sortType == 0">原顺序</button><ul><li v-for="(p, index) in filterPersons" :key="index">{{p.name}} - {{p.age}}</li></ul>
</div><script>new Vue({el:'#root',data:{keyword:'',sortType:0,// 0原顺序 1降序 2升序persons:[{id:'001',name:'张三',age:30},{id:'002',name:'李三',age:19},{id:'003',name:'王三',age:22},{id:'004',name:'王三',age:18},],},computed:{filterPersons(){const arr = this.persons.filter((p)=> {return p.name.indexOf(this.keyword) !== -1})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2) => {return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age})}return arr}}})
</script>

Vue 知识点：列表排序相关推荐

Vue技术—列表排序
<div id="root"><h2>人员列表</h2><input type="text" placeholder= ...
28.Vue列表排序
27.Vue列表过滤_爱米酱的博客-CSDN博客目录1.使用watch属性实现列表过滤2.使用计算属性实现列表过滤3.总结这一小节我们来讲一下Vue的列表过滤,那么想要完成列表过滤就需要有两个关键的步 ...
前端知识基础之Vue知识点串讲
一.Vue知识点串讲复习一下Vue中的核心知识点. 复习完基本的知识点以后,后面再来看一下其它的面试内容 1.基本使用下面,先来看一段最简单的代码,如下所示: <!DOCTYPE html& ...
列表排序-第14届蓝桥杯STEMA测评Scratch真题精选
[导读]:超平老师的<Scratch蓝桥杯真题解析100讲>已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第108讲. 蓝桥杯选拔赛现已更名为STEMA,即ST ...
巧用order实现列表排序
前言近些年,随着 web 应用的蓬勃发展,前端所需要承载的业务需求与开发任务越来越多.一些曾经第一反应是 "调一下后端接口就完事儿" 的任务,随着数据量的提升以及对用户体验 ...
Vue 知识点汇总（下）--附案例代码及项目地址
文章目录 Vue 预备知识与后续知识及项目案例一.简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 2.Vue.js安装二.Vue知识量化三.内容 1.Webpack 详解 ...
舔狗是这样实现列表过滤和列表排序滴
如果你是一个舔狗,又不会写舔狗日记,又恰好会一点点Vue的话,恭喜你这篇舔狗拯救手册可以帮助你顺利处到 {} 干活干活!首先搭建好Vue基本模板 <body><div id=&quo ...
Vue知识点整理（待更新）
Vue知识点整理(待更新) 参考Vue.js中文官网,Vue 知识点汇总(上)–附案例代码及项目地址,Vue 知识点汇总(下)–附案例代码及项目地址,Vue知识点汇总[持更] 文章目录 Vue知识点整 ...
vue拖拽排序组件
vue拖拽排序组件 npm install vuedraggable -S vue.draggable中文文档组件代码 <template><div><div cla ...

Vue 知识点：列表排序

Vue 知识点：列表排序

Vue 知识点：列表排序相关推荐

最新文章

热门文章