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

Posted 2022-12-26 仲夏の梦

技术：通过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>

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