vue中数组和对象的排序
1数组排序
<div id="app">
<ul>
<li v-for="a in arr1">{{a}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
arr:[1,4,5,2,3,44] },computed:{
arr1:function(){
return this.arr.sort(sortNum)//调用排序方法
}
}
})
function sortNum(a,b){//排序方法
return a-b;
}
</script>
2对象排序
<div id="app">
<ul>
<li v-for="(stu,index) in students1">{{stu}}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
students:[
{name:"小a",age:20},
{name:"小b",age:21},
{name:"小c",age:18},
{name:"小d",age:19},
{name:"小f",age:18}
] },
computed:{
students1:function(){
return sortKey(this.students,'age')
}
}
})
function sortKey(array,key){
return array.sort(function(a,b){
var x = a[key];
var y = b[key];
return ((x<y)?-1:(x>y)?1:0)
})
}
</script>
一、前言
我在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 }
