v-for 数字排序数组排序加：key

Vue.js列表排序示例

最新推荐文章于 2025-06-12 08:15:11 发布

原创最新推荐文章于 2025-06-12 08:15:11 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Vue.js进行数组排序的例子，包括数字数组和包含姓名与年龄的对象数组。通过自定义排序方法实现了基本的升序排列，并展示了如何在Vue组件中应用这些方法。

<template>
  <div>
    {{msg}}
    <ul>
  <li v-for="num in sortarr1" :key="num">{{num}}</li>
  <li v-for="student in sortarr2" :key="student.age">{{student.name}}-{{student.age}}</li>
</ul>
    <router-view></router-view>
<div>{{sortnum}}</div>
  </div>
</template>

<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: '你好，这是hi页面',
      arr1:[43,23,7,98],
      arr2:[{'name':'aa','age':2},{'name':'bb','age':12},{'name':'dd','age':42},{'name':'cc','age':30}]
    }
    
  },
  computed:{
   
sortarr1:function(){
return  this.arr1.sort(this.sortnum);
},
sortarr2:function(){
return this.sortByKey(this.arr2,'age')
}
  },
  methods:{
 sortnum:function(a,b) {
  return a-b;
},

sortByKey:function (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>

<style scoped>

</style>