vue根据数组中某一项的值进行排序的方法

某视频剪辑软件中数组和对象的排序

一数组排序

div id=' app ' ul Li v-for=' a in arr 1“{ a } }/Li/ul/div脚本类型=' text/JavaScript ' new Vue({ El : ' # app '，data:{ arr:[1，4，5，2，3，44] })，computed : { arr 1: function(){ return this。由…改编排序(sortNum)//调用排序方法} } })函数sortNum(a，b){//排序方法返回a-b；} /script2对象排序

学生一中的div id='app' ul li v-for='(stu，index)' { { stu } }/Li/ul/div脚本类型=' text/JavaScript ' new Vue({ El : ' # app '，data : { studies : [{ name : '小' a '，年龄：20},{姓名： '小' b '，年龄：21},{姓名： '小' c '，年龄：18},{姓名： '小d '，年龄：19},{姓名： '小f '，age:18} ] }，计算出： { students 1: function(){ return sort key(this。学生，‘age’)} })函数排序键(数组，键){返回数组。sort(函数(a，b){ var x=a[key]；var y=b[key]；返回((xy)？-1:(xy)？1:0)})}/脚本一、前言

我在某视频剪辑软件项目中遇到了一个表格排序的需求，根据某一项的值的大小从大到小调整数组顺序。

二、代码

表格大概是这个样子，样式和图片在代码中简化了。

table class=' recommend _ table '单元格间距=' 0 ' tr th股票/th @ click=' sort '(in _ price)入选价/th @ click=' sort(' now _ price ')'最新价th @ click=' sort('递增)模拟涨跌幅/th/tr v-for='(项目，索引)在推荐列表' : key=' index ' TD div class=' recommend _ name ' { item。name } }/div class=' recommend _ num ' { item。bn } }/div/TD { { item }。in _ price } }/TD TD { { item }。now _ price } }/TD { { item。increment } } %/TD/tr/tablescript type=' text/ecmascript-6 '导出默认“{ data()”高科石化，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，increment : 2.01 }]，sortType: 'in_price' })，方法： { sort(type){ this。排序类型=类型；这个。推荐名单。排序(这个。比较(类型))；//switch(type){//case ' in _ price ' ://this。sortType=' in _ price//这个。推荐名单。排序(这个。比较(' in _ price ')；//break；//case ' now _ price ' ://这个。排序类型=' now _ price//这个。推荐名单。排序(这个。比较(' now _ price ')；//break；//大小写"增加" : //this.sortType="增加";//这个。推荐名单。排序(这个。比较('增量')；//break；//} }，compare(attr) { return function(a，b){ var val 1=a[attr]；var val 2=b[attr]；返回值2-值1；} } } }/script1 .排序方法

这里用到的是数组的分类方法，这个方法有一个需要注意的地方，就是不传参数的话，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。这并不是我们想要的排序方法，所以必须要传参。

分类方法的参数是一个函数，这个函数提供了一个比较方法，要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。

若a小于b，在排序后的数组中a应该出现在b之前，则返回一个小于0 的值。若a等于b，则返回0。若a大于b，则返回一个大于0 的值比较（键){返回函数(a，b){ var val 1=a[键];var val 2=b[key]；返回值2-值1；}}在代码中，比较函数中的匿名函数就是这样一个函数，但这个函数外面又嵌套了一层，这是因为需要根据数组中的某一项来排序，所以需要把这一项的键值传进来。

2.调用排序方法

sort(type){ this . sort type=type；this . recommend list . sort(this.compare(type))；//switch(type){//case ' in _ price ' ://this . sortType=' in _ price '；//this . recommend list . sort(this.compare(' in _ price '))；//break；//case ' now _ price ' ://this . sort type=' now _ price '；//this . recommend list . sort(this.compare(' now _ price '))；//break；//大小写“增加”: //this.sortType=“增加”；//this . recommend list . sort(this.compare(' increment '))；//break；//}}开始的时候，我是根据注释部分写的。像我这样不是特别擅长抽象的人，首先会想到这样写，但是写完之后，我发现这三种情况只是重复的代码。这时候我直接用上面两行代码代替。写完之后，内心很平静。这个复用率高的代码简直太舒服了。

三.结论

虽然是一个简单的函数，但是值得总结。希望对大家的学习有帮助，希望大家多多支持我们。