Vue升序降序（前端价格排序）

定义两个按钮<div id="showGoods"><button @click="upchange">升序</button><button @click="downchange">降序</button></div><div id="showGoods"><button @click="upchange"&g

周亚鑫

2434人浏览 · 2021-04-29 10:00:06

周亚鑫 · 2021-04-29 10:00:06 发布

定义两个按钮

<div id="showGoods">
        <button @click="upchange">升序</button>
        <button @click="downchange">降序</button>
 </div>

<div id="showGoods">
        <button @click="upchange">升序</button>
        <button @click="downchange">降序</button>
		<div>	
				<!-- 商品组件-->
          		<new-ul :item="listinfo"></new-ul>
		</div>
 </div>

vue

let vm = new Vue({
el: "#showGoods",
data: {
          listinfo: null; //获取到后台提供的值
        },
 methods: {
 			upchange() {
 			//写法一
            	this.listinfo.sort((a,b)=>{
            	//排序基于的数据
              			return a.price - b.price;
           		 })
          },
          downchange() {
          //写法二
            function sortData(a, b) {
              		return b.price - a.price;
            	}	
            this.listinfo.sort(sortData);
          }
		}
})