下拉排序数据

<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;
		 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>