关键词：
【Vue2.0学习】— 列表排序（四十一）
<!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>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<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) of filPersons" :key="index">
p.name-p.age-p.sex</li>
</ul>
</div>
<script>
const vm = new Vue(
el: '#root',
data:
sortType: '0', //0代表原序，2代表升序，1代表降序
keyWord: '',
persons: [
id: '001',
name: '马冬梅',
age: 2,
sex: '女'
,
id: '002',
name: '周冬雨',
age: 244,
sex: '女'
,
id: '003',
name: '周杰伦',
age: 33,
sex: '男'
,
id: '004',
name: ' 任嘉伦',
age: 99,
sex: '男'
]
,
// 使用 computed实现
computed:
filPersons()
const arr = this.persons.filter((p) =>
return p.name.indexOf(this.keyWord) !== -1
)
//判断是否排序
if (this.sortType)
//p1-p2升序，p2-p1降序
arr.sort((p1, p2) =>
return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
)
return arr
)
</script>
</body>
</html>
补充知识点：
sort排序
但是当我们对数字进行排序时，会出现问题，例：
这是为什么呢？
怎么没有起到效果（按大小排序），其实，sort方法会调用每个数组项的toString()方法，得到字符串，然后再对得到的字符串进行排序。虽然数值15比3大，但在进行字符串比较时"15"则排在"3"前面（ASCII字符顺序）。显然，这种结果不是我们想要的，这时，sort()方法的参数就起到了作用，我们把这个参数叫做比较函数。
sort()方法如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：
- 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
- 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript
标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）； - 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。 compareFunction(a, b)
必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。
因此比较函数的格式要求如下：
function compare(a, b)
if (a < b )
// 按某种排序标准进行比较, a 小于 b
return -1;
if (a > b )
return 1;
// a与b相等
return 0;
数字数组的比较函数
从小到大排列（升序排列）
function compareNumbers(a, b)
return a - b;
从大到小排列（降序排列）
function compareNumbers(a, b)
return b - a;
var arr = [5, 16, 24, 7, 3];
arr.sort(function(a, b)
return a - b;
)
console.log(arr)
var arr = [5, 16, 24, 7, 3];
arr.sort(function(a, b)
return b - a;
)
console.log(arr)
vue2.0学习—过滤器（四十四）(代码片段)
【Vue2.0学习】—过滤器（四十四）<divid="root"><h2>显示格式化后的时间</h2><!--计算属性实现--><h4>现在是:fmtTime</h4><!--methods实现--><h4>现在是:getTime()</h4&g 查看详情
vue2.0学习—收集表单数据（四十三）(代码片段)
【Vue2.0学习】—收集表单数据（四十三）v-model的三个修饰符：lazy：失去焦点再收集数据number:输入字符串转为有效的数字trim:输入首尾空格过滤<body><divid="root"><form@submit.prevent="demo" 查看详情
vue2.0学习—vue监视数据的原理（四十二）(代码片段)
【Vue2.0学习】—Vue监视数据的原理（四十二）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content& 查看详情
vue2.0学习—自定义指令（四十九）(代码片段)
【Vue2.0学习】—自定义指令（四十九）需求：需求1:定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍需求2:定义一个v-fbind指令，和v-bind功能相似，但可以让其绑定的input元素默认获取焦... 查看详情
vue2.0学习—理解数据代理（三十一）(代码片段)
【Vue2.0学习】—理解数据代理（三十一）什么是数据代理？通过一个对象代理对另一个对象中属性的操作（读/写）<script>letobj=x:100letobj2=y:200Object.defineProperty(obj2,'x',get()returnobj.x,set(val 查看详情
vue2.0学习—v-pre指令（四十八）(代码片段)
【Vue2.0学习】—v-pre指令（四十八）v-pre指令跳过其所在节点的编译过程可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译<divid="root"><h2v-pre>Vue其实很简单</h2><h2... 查看详情
vue2.0学习—v-text指令（四十五）(代码片段)
【Vue2.0学习】—v-text指令（四十五）v-text指令：作用：向其所在的节点中渲染文本内容与插值语法的区别：v-text会替换掉节点中的内容，XX不会<divid="root"><h2>你好，name</h2><h2v-tex 查看详情
vue2.0学习—v-html指令（四十六）(代码片段)
【Vue2.0学习】—v-html指令（四十六）知识储备：cookie简略图示v-html指令：作用：向指定节点中渲染包含html结构中的内容与插值语法的区别：v-html会替换掉节点中所有的内容XX不会v-html可以识别html结构严重... 查看详情
vue2.0学习—组件（五十一）(代码片段)
【Vue2.0学习】—组件（五十一）组件的定义：实现应用中局部功能代码和资源的集合模块化：当应用中的js都以模块来编写的，那么这个应用就是一个模块化的应用组件化：当应用中的功能都是多组件的方... 查看详情
vue2.0学习—v-cloak指令（四十七）(代码片段)
【Vue2.0学习】—v-cloak指令（四十七）v-cloak指令：本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性使用css配合v-cloak可以解决网速慢时页面展示出XXX的问题本小结知识点补充属性选择器&... 查看详情
vue2.0学习—全局事件总线globaleventbus（六十一）(代码片段)
【Vue2.0学习】—全局事件总线GlobalEventBus（六十一）知识回顾：全局事件总线(GlobalEventBus)一种组件间通信的方式，适用于任意组件间通信安装全局事件总线：使用事件总线：接收数据：A组件想接收数据... 查看详情
2018-09-08第四十四十一次课(代码片段)
第四十、四十一次课Docker入门目录一、docker简介二、安装docker三、镜像管理四、通过容器创建镜像五、通过模板创建镜像六、容器管理七、仓库管理八、数据管理九、数据卷备份恢复十、docker网络模式十一、oprationnotpermitted十二... 查看详情
vue2.0学习—条件渲染（三十九）(代码片段)
【Vue2.0学习】—条件渲染（三十九）一、v-for指令1、用于展示数据的列表2、语法：v-for="(item,index)"inXXX:key="yyyy"3、可遍历数组、对象、字符串、指定次数<divid="root"><h2>人员列表</h2... 查看详情
webpack优化篇（四十一）：体积分析：使用webpack-bundle-analyzer(代码片段)
说明玩转webpack学习笔记使用webpack-bundle-analyzer代码示例：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports= plugins:[ newBundleAnalyzerPlugin 查看详情
leetcode刷题四十一(代码片段)
leetcode刷题四十一题目叙述https://leetcode-cn.com/problems/subarray-product-less-than-k/给你一个整数数组nums和一个整数k，请你返回子数组内所有元素的乘积严格小于k的连续子数组的数目。示例1：输入：nums=[10,5,2,6],k=100输... 查看详情
vue2.0—过渡与动画（二十一）(代码片段)
【Vue2.0】—过渡与动画（二十一）方式一：使用animate.css动画库进入官网https://animate.style/一、Installing（安装）npminstallanimate.css--save或者yarnaddanimate.css或者引入href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.... 查看详情
“全栈2019”java第四十一章：static关键字
难度初级学习时间10分钟适合人群零基础开发语言Java开发环境JDKv11IntelliJIDEAv2018.3文章原文链接“全栈2019”Java第四十一章：static关键字下一章“全栈2019”Java第四十二章：静态代码块与初始化顺序学习小组加入同步学习小组，共... 查看详情
elasticsearch实战（四十一）-存储桶聚合(代码片段)
Elasticsearch除了在搜索方面非常之快，对数据分析也是非常重要的一面。正确理解Bucketaggregation对我们使用Kibana非常重要。Elasticsearch提供了非常多的aggregation可以供我们使用。其中Bucketaggregation... 查看详情