vue项目中v-for循环根据某个字段排序显示数据

-html

<template>
   <div>
     <el-tag type="success" v-for="(item,index) in sortDatalist">{{item.name}}</el-tag>
   </div>
</template>

<script>
export default {
//import引入的组件需要注入到对象中才能使用",
  components: {},
  computed:{
    sortDatalist:function(){
      return this.sortByKey(this.datalist,'siteOrder');
    }
  },
  data() {
    //这里存放数据",
    return {
      datalist:[
        {
          name:'陆婷',
          siteOrder:4
        },
        {
          name:'鞠婧祎',
          siteOrder:1,
        },
        {
          name:'冯薪朵',
          siteOrder:3,
        },
        {
          name:'林思意',
          siteOrder:2,
        },
        {
          name:'孙芮',
          siteOrder:5,
        }
      ]
    };
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    sortByKey(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>

• 默认显示：
  
  根据数据list中siteOrder排序显示