vue 根据数组中某一项的值进行排序
一、前言
我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。
二、代码
表格大概是这个样子,样式和图片在代码中简化了。
<table class="recommend_table" cellspacing="0">
<tr>
<th>股票</th>
<th @click="sort('in_price')">入选价</th>
<th @click="sort('now_price')">最新价</th>
<th @click="sort('increase')">模拟涨跌幅</th>
</tr>
<tr v-for="(item,index) in recommendlist" :key="index">
<td>
<div class="recommend_name">{{item.name}}</div>
<div class="recommend_num">{{item.bn}}</div>
</td>
<td>{{item.in_price}}</td>
<td>{{item.now_price}}</td>
<td>{{item.increase}}%</td>
</tr>
</table>
<script type="text/ecmascript-6">
export default {
data(){
return{
recommendlist: [
{ name:'高科石化', bn:'002778', in_price: 20.68, now_price: 28.68, increase: 10.01 },
{ name:'中孚信息', bn:'300659', in_price: 19.46, now_price: 17.46, increase: 9.06 },
{ name:'永福股份', bn:'300712', in_price: 17.68, now_price: 32.68, increase: 2.01 }
],
sortType: 'in_price'
}
},
methods: {
sort(type) {
this.sortType = type;
this.recommendlist.sort(this.compare(type));
// switch(type){
// case 'in_price':
// this.sortType = 'in_price';
// this.recommendlist.sort(this.compare('in_price'));
// break;
// case 'now_price':
// this.sortType = 'now_price';
// this.recommendlist.sort(this.compare('now_price'));
// break;
// case 'increase':
// this.sortType = 'increase';
// this.recommendlist.sort(this.compare('increase'));
// break;
// }
},
compare(attr) {
return function(a,b){
var val1 = a[attr];
var val2 = b[attr];
return val2 - val1;
}
}
}
}
</script>
1. 排序方法
这里用到的是数组的sort方法,这个方法有一个需要注意的地方,就是不传参数的话,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。这并不是我们想要的排序方法,所以必须要传参。
sort方法的参数是一个函数,这个函数提供了一个比较方法,要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。
- 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
- 若 a 等于 b,则返回 0。
- 若 a 大于 b,则返回一个大于 0 的值。
compare(key) {
return function(a,b){
var val1 = a[key];
var val2 = b[key];
return val2 - val1;
}
}
在代码中,compare函数中的匿名函数就是这样一个函数,但这个函数外面又嵌套了一层,这是因为需要根据数组中的某一项来排序,所以需要把这一项的key值传进来。
2. 调用排序方法
sort(type) {
this.sortType = type;
this.recommendlist.sort(this.compare(type));
// 注释部分
switch(type){
case 'in_price':
this.sortType = 'in_price';
this.recommendlist.sort(this.compare('in_price'));
break;
case 'now_price':
this.sortType = 'now_price';
this.recommendlist.sort(this.compare('now_price'));
break;
case 'increase':
this.sortType = 'increase';
this.recommendlist.sort(this.compare('increase'));
break;
}
}
一开始我按照注释的部分写的,和我一样抽象能力不是特别好的人首先会想到要这样写,但是写出来之后发现三种情况不过是重复的代码,这时我就直接用最上面两行代码来代替,写完以后感觉内心一片平和。这种复用率高的代码简直让人太舒服了。
三、结语
虽然是一个简单的功能,但是非常值得归纳总结一下。
来源:https://segmentfault.com/a/1190000016199017
vue 根据数组中某一项的值进行排序的更多相关文章
- leetcode-26.删除重复数组中的重复项
leetcode-26.删除重复数组中的重复项 题意 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数 ...
- Java实现 LeetCode 80 删除排序数组中的重复项 II(二)
80. 删除排序数组中的重复项 II 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O ...
- 每天一道面试题LeetCode 80--删除排序数组中的重复项 II(python实现)
LeetCode 80--删除排序数组中的重复项 II 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输 ...
- Vue 改变数组中对象的属性不重新渲染View的解决方案
Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...
- [LeetCode] Remove Duplicates from Sorted Array 有序数组中去除重复项
Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...
- Leetcode_删除排序数组中的重复项
Leetcode 删除排序数组中的重复项 题目: 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用 额外的数组空间,你必须在原地修改输入数 ...
- arts打卡 从排序数组中删除重复项
Algorithm 从排序数组中删除重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 ...
- [LeetCode] 80. Remove Duplicates from Sorted Array II ☆☆☆(从有序数组中删除重复项之二)
https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/discuss/27976/3-6-easy-lines-C% ...
- [LeetCode] 26. Remove Duplicates from Sorted Array ☆(从有序数组中删除重复项)
[LeetCode] Remove Duplicates from Sorted Array 有序数组中去除重复项 描述 Given a sorted array nums, remove the d ...
随机推荐
- Konig定理及证明
Konig定理 由匈牙利数学家柯尼希(D.Konig)于1913年首先陈述的定理. 定理的内容:在0-1矩阵中,1的最大独立集合最小覆盖包含的元素个数相同,等价地,二分图中的最大匹配数等于这个图中的最 ...
- Cyclic GCDs
Cyclic GCDs 题目链接 题面描述 有\(n\)个点,每个点有权值. 现有排列\(P\),\(p_i\)表示\(i\)个点向\(p_i\)连了一条边. 显然会形成若干个简单环.每个简单环的权值 ...
- hdu2516
hdu2516斐波那契博弈,也是一堆博弈的一种,第一个人第一次可以拿任意多,但是不能取完,第二个人拿至少一个,但不能超过上一个人拿的两倍 #include<iostream> #inclu ...
- List --搜索列表
1,常见的内建函数 . if val in L : # 是否在列表 . L.index(val) # 找下标 . L.count(val) # 有多少个 . min/max(L ) # 最大最小 . ...
- JavaSE_04_JDK1.8新特性Lambda表达式
1.1体验Lambda的更优写法 借助Java 8的全新语法,上述Runnable接口的匿名内部类写法可以通过更简单的Lambda表达式达到等效: 1.2 Lambda标准格式 Lambda省去面向对 ...
- 匿名/局部内部类访问局部变量时,为什么局部变量必须加final
我们都知道方法中的匿名/局部内部类是能够访问同一个方法中的局部变量的,但是为什么局部变量要加上一个final呢? 首先我们来研究一下变量生命周期的问题,局部变量的生命周期是当该方法被调用时在栈中被创建 ...
- 通过BlukLoad的方式快速导入海量数据
http://www.cnblogs.com/MOBIN/p/5559575.html 摘要 加载数据到HBase的方式有多种,通过HBase API导入或命令行导入或使用第三方(如sqoop)来导入 ...
- linux下用eclipse开发mapreduce遇到的问题
Unable to create the selected preference page.org/apache/hadoop/eclipse/preferences/MapReducePrefere ...
- 如何把win10自带输入法改为简体中文
win10设置为中文简体 先找到win10的设置,然后下面按照图示操作,很简单 点击每一个红色的方框既能够到达---------->>>中文简体 目的地 2 会了吗,你个小傻瓜
- linux sed命令使用疑惑总结
s 替换命令 [zhuhc@test111 ~]$ sed 's/ma/mass' test.txt , : unterminated `s' command 原因:替换命令s末尾的斜杠丢失了.正确命 ...