vue实现对数据进行升序降序排列

单个属性排序：

<template>
  <div>
    <button type="button" @click="sx()">{{sxpl}}</button>
	<button type="button" @click="jx()">{{jxpl}}</button>
    <ul>
      <li v-for="item in sortedList" :key="item.name">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '物品1', price: 20 },
        { name: '物品2', price: 50 },
        { name: '物品3', price: 10 },
        { name: '物品4', price: 30 }
      ],
      ascending: false ,// 标记当前是否为升序排序
	  sxpl:'价格从低到高',
	  jxpl:'价格从高到低',
	  descending: false// 标记当前是否为降序排序
    };
  },
  computed: {
    sortedList() {
      const newList = this.list.slice(); // 克隆一份原始数组
	  if(this.ascending == false && this.descending == false){
		  return this.list
	  }
	  
      if(this.ascending == true){
		newList.sort((a, b) =>  (a.price - b.price)); // 使用比较器进行排序
		return newList;  
	  }
      
	  if(this.descending == true){
		 newList.sort((a, b) =>  (b.price - a.price)); // 使用比较器进行排序
		return newList; 
	  }
	  
    }
  },
  methods: {
    sx(){
		this.ascending = !this.ascending
		this.descending = false
	},
	jx(){
		this.descending = !this.descending
		this.ascending = false
	}
  }
};
</script>