Vue实现升序降序
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>06_列表渲染_過濾與排序</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><!--1.列表過濾2.列表排序--><div id="test"><input type="text" v-model="searchName"/><ul><li v-for="(p,index) in filterPersons" :key="index">{{index}}--{{p.title}}--{{p.price}}</li> </ul><button @click="setOrderType(1)">年齡升序</button><button @click="setOrderType(2)">年齡降序</button><button @click="setOrderType(0)">原本順序</button></div><!-- <script type="text/javascript" src="../js/vue.js" ></script> --><script>new Vue({el: '#test',data:{goodsListArr:[{id:1, imgUrl:"goods1.png", title:"湯品一品酸菜400g*5袋（贈500g手工鮮 薯粉條 3.9分值）", price:31.50, sellNum:63},{id:2, imgUrl:"goods1.png", title:"湯品一品酸菜400g*5袋（贈500g手工鮮 薯粉條 3.9分值）", price:34.50, sellNum:61},{id:3, imgUrl:"goods1.png", title:"湯品一品酸菜400g*5袋（贈500g手工鮮 薯粉條 3.9分值）", price:36.50, sellNum:62},],persons:[{name:'Tom',age:18},{name:'Jack',age:16},{name:'Bob',age:19},{name:'Rose',age:17}],searchName:'',orderType: 0, //0代表原本，1代表升序，2代表降序},computed:{filterPersons(){//取出相關數據const {searchName,goodsListArr,orderType}=this //最終需要顯示的數組let fPersons;//對persons進行過濾fPersons=goodsListArr.filter(p => {return p;})console.log(fPersons);//排序if(orderType!==0){fPersons.sort(function(p1,p2){ //返回負數P1在前，返回正數P2在前//1代表升序，2代表降序if(orderType===2){return p2.price-p1.price}else{return p1.price-p2.price}return p2.price-p1.price})}return fPersons}},methods:{setOrderType(orderType){this.orderType=orderType}}})</script></body>
</html>
?
總結
- 上一篇： 麻醉系统监测指标
- 下一篇： ThinkPhp6+Vue智慧城市后台管