三十六 搜索结果页 排序功能，和上下箭头排序的样式处理（动态添加样式，有点难理解）

shop—list.vue 完整代码（有点难以理解，动态添加样式）

<template>
        <view class="shop-list ">
                <view class="shop-title f-color">
                        <view class="shop-item" v-for="(item,index) in shopList.data" :key="index" @tap="changeTab(index)">
                                <view :class="shopList.currentIndex == index ? 'f-active-color' : ''">
                                        {{item.name}}
                                </view>
                                <view class='shop-iocn'>
                                        <view class="iconfont icon-xialajiantou1 up" :class="item.status == 1 ? 'f-active-color' : ''">
                                        </view>
                                        <view class="iconfont icon-xiajiantou down" :class="item.status == 2 ? 'f-active-color' : ''">
                                        </view>
                                </view>
                        </view>
                </view>
                <Lines />
                <commodity :dataList="commodityList "></commodity>
        </view>
</template>

<script>
        import Lines from "@/components/common/lines.vue"
        import commodity from './commodity.vue'
        export default {
                data() {
                        return {
                                shopList: {
                                        "currentIndex": 0,
                                        "data": [{
                                                        name: '价格',
                                                        status: 1
                                                },
                                                {
                                                        name: '折扣',
                                                        status: 0
                                                },
                                                {
                                                        name: '品牌',
                                                        status: 0
                                                }
                                        ]
                                },
                                commodityList: [{
                                                id: 1,
                                                img: '../../static/img/commondity.png',
                                                name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice: '299',
                                                oprice: '699',
                                                discount: '999.5'
                                        },
                                        {
                                                id: 2,
                                                img: '../../static/img/commondity.png',
                                                name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice: '269',
                                                oprice: '699',
                                                discount: '5.5'
                                        },
                                        {
                                                id: 3,
                                                img: '../../static/img/commondity.png',
                                                name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
                                                pprice: '289',
                                                oprice: '688',
                                                discount: '5.5'
                                        }
                                ]
                        }
                },
                components: {
                        Lines,
                        commodity
                },
                methods: {
                        changeTab(index) {
                                // 获取索引
                                let idx = this.shopList.currentIndex
                                // 点击了具体哪一个对象
                                let item = this.shopList.data[idx]
                                console.log(item);
                                if (idx == index) {
                                return 	item.status = item.status == 1 ? 2 : 1
                                }

                                let newItem = this.shopList.data[index];
                                item.status = 0;
                                this.shopList.currentIndex = index;
                                newItem.status = 1;
                        }
                }
        }
</script>

<style scoped>
        .shop-title {
                display: flex;
        }

        .shop-item {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 80rpx;
        }

        .shop-iocn {
                position: relative;
                margin-left: 10rpx;
        }

        .iconfont {
                width: 16rpx;
                height: 8rpx;
                position: absolute;
                left: 0;
        }

        .up {
                top: -24rpx;
        }

        .down {
                top: -4rpx
        }
</style>