Vue中通过sort方法实现快速排序

技术：通过sort方法可以实现id ，价格 等等想要的快速排序方法。

<template>
  <div>
    <div>
      <input type="text" placeholder="商品名称" v-model="queryInfor.name" />
    </div>
    <table>
      <tr>
        <th>编号
          //v-if 就是当变量flag为true时创建改按钮为非true时删除
          //然后绑定点击事件
          <button v-if="flag" @click="sortFun">升序</button>
          <button v-if="!flag" @click="sortFun">降序</button>
        </th>
        <th>名称</th>
        <th>价格</th>
      </tr>
      <tr v-for="(item, index) in lcList" :key="index">  //循环遍历的数组
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import dates from "../../public/data"; //外部导入的数据
export default {
  components: {},
  data() {
    return {
      lcList: {},
      queryInfor: { //搜索框的变量
        name: "",
      },
      flag: true, //定义显示隐藏的变量
    };
  },
  mounted() {
    this.lcList = dates.data; //用自己创建的空对象接受传递过来的值
    console.log(this.lcList);
  },
  methods: {
 	//排序方法 —— 通过id   要是通过价格的话直接用price替换掉id就可以了
    sortFun() {
      if (this.flag) {
        this.lcList.sort((a, b) => {
          return a.id - b.id;
        });
      } else {
        this.lcList.sort((a, b) => {
          return b.id - a.id;
        });
      }
      this.flag = !this.flag;
    },
  },
  computed: {},
};
</script>

以下为效果图：（仅供参考）