當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue实现升序降序

發(fā)布時(shí)間：2024/3/26 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue实现升序降序小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!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><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>new Vue({el: '#test',data:{goodsListArr:[{id:1, imgUrl:"goods1.png", title:"湯品一品酸菜400g*5袋（贈(zèng)500g手工鮮薯粉條 3.9分值）", price:31.50, sellNum:63},{id:2, imgUrl:"goods1.png", title:"湯品一品酸菜400g*5袋（贈(zèng)500g手工鮮薯粉條 3.9分值）", price:34.50, sellNum:61},{id:3, imgUrl:"goods1.png", title:"湯品一品酸菜400g*5袋（贈(zèng)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(){//取出相關(guān)數(shù)據(jù)const {searchName,goodsListArr,orderType}=this //最終需要顯示的數(shù)組let fPersons;//對(duì)persons進(jìn)行過濾fPersons=goodsListArr.filter(p => {return p;})console.log(fPersons);//排序if(orderType!==0){fPersons.sort(function(p1,p2){ //返回負(fù)數(shù)P1在前，返回正數(shù)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>

總結(jié)

以上是生活随笔為你收集整理的Vue实现升序降序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。