定义两个按钮
<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);
          }
		}
})

Logo

前往低代码交流专区

更多推荐