【Vue】通过computed为筛选列表数组进行排序（图文+完整代码示例）

排序示意图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<style>input {height: 30px;width: 200px;}
</style><body><div id="box">查询框：<input type="text" name="" v-model="keyWord"><ul><li v-for="(p,index) in mPersons" :key="index">{{p.id}} - {{p.name}} - {{p.age}}岁 - {{p.sex}}</li></ul><button @click="sortUp">年龄升序</button><button @click="sortDown">年龄升序</button><button @click="sortOld">原顺序</button></div>
</body>
<script type="text/javascript">var box = new Vue({el: "#box",data: {persons: [{ id: "001", name: "孙悟空", age: 21, sex: "男" },{ id: "002", name: "唐三藏", age: 25, sex: "男" },{ id: "003", name: "孙行者", age: 23, sex: "女" },{ id: "004", name: "唐太宗", age: 33, sex: "男" },{ id: "005", name: "张三丰", age: 22, sex: "女" },],keyWord: "",mCheck: 1,sortType: 0 // 0-序，1-升，2-降},methods: {sortUp() {this.sortType = 1;},sortDown() {this.sortType = 2;},sortOld() {this.sortType = 0;},},computed: {mPersons() {// 先把筛选的数据存入变量数组sss               var sss = this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1;})// 对SSS排序，再返回给mPersonsif (this.sortType == 0) {return sss;}if (this.sortType == 1) {return sss.sort((p1, p2) => {return p1.age - p2.age });}if (this.sortType == 2) {return sss.sort((p1, p2) => { return p2.age - p1.age });}// return sss;}},})</script></html>

【Vue】通过computed为筛选列表数组进行排序（图文+完整代码示例）相关推荐

vue 下拉框筛选列表_vue下拉菜单选择输入框_带有下拉菜单的Vue搜索输入可提供更多过滤条件...
vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdo ...
python怎么清除代码_Python如何清空列表？清空列表的4种方法（代码示例）
通过Python语言提供的不同构造的方法可以有许多方法来清空列表,下面本篇文章就来给带大家介绍Python中4种清空列表的方法,希望对大家有所帮助. 方法1:重新初始化列表可以重初始化列表,初始化该 ...
【CSS】课程网站网格商品展示模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
文章目录一.网格展示盒子模型测量及样式 1.盒子尺寸测量 2.处理列表间隙导致意外换行问题 3.列表项测量及样式二.网格展示盒子模型代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果 ...
【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
OpenCV加载图像列表imagelist的实例(附完整代码)
OpenCV加载图像列表imagelist的实例 OpenCV加载图像列表imagelist的实例 OpenCV加载图像列表imagelist的实例 #include "opencv2/im ...
易语言超级列表框表项关键字搜索代码示例_易语言
超级列表框表项关键字搜索示例运行结果: 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持.如果你想了解更多相关内容请查看下面相关 ...
vue + elementui table 列内容相同自动合并单元格完整代码
效果图 <el-table :data="gridData" border class="det-div" :span-method="obje ...
java 二维数组的筛选_java中的筛选遍历数组，实例展示
java中关于数组的知识点也是十分丰富的,上次已经为大家介绍过java中的二维数组排序是怎样的主要内容,今天再为大家介绍一些与数组相关的其他内容,也就是java中的筛选遍历数组,一起来看看吧. 一.$ ...
【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )
文章目录一.List 集合的 map 方法说明 ( 生成 ListView 组件集合 ) 二.ListView 垂直列表三.ListView 水平列表四.相关资源一.List 集合的 map ...

【Vue】通过computed为筛选列表数组进行排序（图文+完整代码示例）

【Vue】通过computed为筛选列表数组进行排序（图文+完整代码示例）相关推荐

最新文章

热门文章