vue 金额排序带图片

<li :class="{cur:shows==2}" @click="onSort">
    金额    
    <img :class="{'active':isSort==1}" v-if="sort_show" style="top: 1px;" src="../../assets/sjx.png"/><!--初始-->
    <img :class="{'active':isSort==2}" v-if="sortup_show" style="top: 1px;" src="../../assets/sjx1.png"/><!--升序-->
    <img :class="{'active':isSort==3}" v-if="sortdown_show" style="top: 1px;" src="../../assets/sjx2.png" /><!--降序-->
</li>
<div class="list-new">
                <div class="list-item flex jcsb">
                    <div class="left">
                        <p class="fs-14 fc-66 dis-dot">天猫双11来了</p>
                        <span class="fs-12 fc-99 smal-ellipsis">天猫双11来了，菜鸟上线第三代无人仓效率翻倍</span>
                    </div>
                    <div class="right text-tc dis-dot">
                        <i class="fc-f4 fs-18 text-tc">¥20</i>
                        <b class="fs-12 fc-99 text-tc dis-dot"></b>
                    </div>
                </div>
                    <div class="list-item flex jcsb">
                        <div class="left">
                            <p class="fs-14 fc-66 dis-dot">天猫双11来了</p>
                            <span class="fs-12 fc-99 smal-ellipsis">天猫双11来了，菜鸟上线第三代无人仓效率翻倍</span>
                        </div>
                        <div class="right text-tc dis-dot">
                            <i class="fc-f4 fs-18 text-tc">¥1000</i>
                            <b class="fs-12 fc-99 text-tc dis-dot"></b>
                        </div>
                    </div>
                    <div class="list-item flex jcsb">
                        <div class="left">
                            <p class="fs-14 fc-66 dis-dot">天猫双11来了</p>
                            <span class="fs-12 fc-99 smal-ellipsis">天猫双11来了，菜鸟上线第三代无人仓效率翻倍</span>
                        </div>
                        <div class="right text-tc dis-dot">
                            <i class="fc-f4 fs-18 text-tc">¥500</i>
                            <b class="fs-12 fc-99 text-tc dis-dot"></b>
                        </div>
                    </div>
                            
            </div>

        export default {
            name: "Home",    
            data() {
                return {    
                    isOrder:0,//最新1为升序，2为降序
                    Order_show:true,//最新初始数据显示
                    Orderup_show:false,//最新升序
                    Orderdown_show:false,//最新降序
                };
            },
            methods: {
                onSort1(){                 
                    this.sort_show=true,
                    this.sortup_show=false,
                    this.sortdown_show=false
                    if(this.isOrder < 1){
                        this.shows=1
                        this.isOrder = 1
                        this.Order_show=false,
                        this.Orderup_show=true,
                        this.Orderdown_show=false,
                        this.demand_Data.sort((a,b)=>{
                            return a.time - b.time
                        })
                    }else if(this.isOrder == 1){
                        
                        this.shows=1
                        this.isOrder = 2
                        this.Order_show=false,
                        this.Orderup_show=false,
                        this.Orderdown_show=true,
                        this.demand_Data.sort((a,b)=>{
                            return b.time - a.time
                        })
                    }else if(this.isOrder == 2){                    
                        this.Order_show=true,//预算初始数据显示
                        this.Orderup_show=false,//预算升序
                        this.Orderdown_show=false,//预算降序
                        this.isOrder = 0
                        this.getDemand()
                        this.shows=-1
                    }
                    
                },
            }
        
        }