排序筛选功能，点击切换文字和箭头样式，通过监视属性或者方法两种方式实现，vue和uniapp都能使用。

 1、通过方法实现

1.1 、给对应的文字上色，先定义一个current:0，上来让第一个文字先选中，点击的时候把索引传过去，并赋值给current，这样就能实现点击后，点击那个文字就能上色

1.2、实现点击单个上下切换，其实就是通过判断每条数据的status值，1上亮，2下亮，0不亮，默认让第一个的上箭头亮，点击后将值改变就能切换。

1.3、点击每一个都能上下切换，就是判断点击的点击索引是否和当前的current相等，不相等就说明点击了另一个，此时将所有的状态值都改为0，再将点击那个的状态值赋值为1，相等就说明是点击的同一个，就不会执行将所有的状态值都改为0，只用上下切换就行了 。

<template>
	<view>
		<!-- 筛选排序 -->
		<view class="list">
			<view class="main" v-for="(item,index) in list" :key="index"
			@click="chang(index)">
				<view :class="current == index ? 'active' : ''">{{item.name}}</view>
				<view class="sort">
					<text :class="item.status == 1 ? 'active' : ''"  class="iconfont icon-xiangshangjiantou rise"></text>
					<text :class="item.status == 2 ? 'active' : ''" class="iconfont icon-xiajiantou fail"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				list:[
					{name:'价格',status:1},
					{name:'销量',status:0},
					{name:'库存',status:0}
				],
			}
		},
		methods: {
			chang(index){    //点击切换
				if (this.current != index) {
					this.list.forEach(v=>{
						v.status=0
					})
					this.list[index].status = 2
				}
				this.list[index].status == 1 ? this.list[index].status = 2 : this.list[index].status = 1  //单个切换
				this.current = index;
			}
		},
		
	}
</script>

<style scoped lang="scss">
		.list{
			padding: 15rpx;
			color: #636263;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			.main {
				flex: 1;
				display: flex;
				justify-content: center;
				.sort {
					position: relative;
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;
					.rise {
						position: absolute;
						top: 5rpx;
						font-size: 10rpx !important;
					}
					.fail {
						position: absolute;
						top: 18rpx;
						font-size: 10rpx !important;
					}
				}
			}
		}
	.active{
		color: #49BDFB;
	}
</style>

2,、通过监视属性实现

watch:{
   current(to,from){  
		if (to != from) {    如果点击的不是同一个
			this.list.forEach(v=>{
				v.status = 0        //将所有的状态值赋值为0
				})
				this.list[this.current].status = 1    //点击到对应的赋值为1
			}
		},
	},
methods: {  //实现单个点击的切换
	chang(index){
	this.list[index].status == 1 ? this.list[index].status = 2 : this.list[index].status = 1
    this.current = index;
			}
		},