下拉排序数据

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

<template>     <div>               <!-- 排序 -->         <div class="list-sort">             <div>综合</div>             <div style="display: flex;align-items: center;">                 <div>价格</div>                 <div>                     <div :class="{'active':!onActive}" class="iconfont icon-jiantou" @click="onSort()">33</div>                     <div :class="{'active':onActive}" class="iconfont icon-jiantouxia" @click="onSort">33</div>                 </div>             </div>         </div>               </div> </template>   <script>     export default{         data(){             return{                 list:[],                 isSort:false, //排序                 onActive:false,                 on:false             }         },         methods:{             onSort(flag){ //排序       console.log('----------ewe');                 this.on = flag         this.onActive = this.on                                         this.isSort = !this.isSort                 if(this.isSort){                     this.list.sort((a,b)=>{                         return a.Price - b.Price                     })                 }else{                     this.list.sort((a,b)=>{                         return b.Price - a.Price                     })                 }                               }         }     } </script>   <style scoped>     .list-sort{         margin-top: 55px;         width: 100%;         height: 40px;         background-color: white;         display: flex;         justify-content: space-around;         align-items: center;         font-size: 14px;     }     .iconfont{         font-size: 8px;         margin: 0 3px;     }     .active{         color: red;     } </style>