vue数据排序

<template>
  <div>
    <el-button type="primary" @click="btn()">排序</el-button>
    <span v-for="item in list" :key="item.date">{{item.date}}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { date: '2016-05-02' },
        { date: '2016-05-04' },
        { date: '2016-05-08' },
        { date: '2016-05-07' },
        { date: '2016-05-01' }
      ],
      sortType: false
    }
  },
  methods: {
    // 排序的方法
    compare (attr, rev) {
      if (rev == undefined) {
        rev = 1;
      } else {
        rev = (rev) ? 1 : -1;
      }
      return (a, b) => {
        a = a[attr];
        b = b[attr];
        if (a < b) {
          return rev * -1;
        }
        if (a > b) {
          return rev * 1;
        }
        return 0;
      }
    },
    // 排序
    btn () {
      this.sortType = !this.sortType
      if (this.sortType) {
        this.list.sort(this.compare('date', true))
      } else {
        this.list.sort(this.compare('date', false))
      }
    }
  }
}
</script>

<style lang="less" scoped>
span {
  width: 100px;
  display: block;
  margin-left: 200px;
  margin-top: 30px;
}
</style>