用Vue寫個開關(guān)控制兩張圖的切換，點(diǎn)擊換張圖，再次點(diǎn)擊就換回去

template標(biāo)簽里寫兩個<div v-on:click="arrowChange"><img src="up.png" v-show="isup"><img src="down.png" v-show="!isup"></div>,data里定義isup的值為true,methods里添加arrowChange：function(){this.arrowChange=!this.arrowChange},就可以了

我覺得這種方法更靈活些，樓主覺得呢？這也是很多輪播圖常用的邏輯

<template>
    <div>
        <img :src="imgSrc" @click="toggleImg"/>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                bgImg: ['../a.jpg', '../b/jpg'],
                imgIndex: 0
            }
        },
        computed: {
            imgSrc() {
                //計(jì)算圖標(biāo)地址
                return bgImg[this.imgIndex]
            }
        },
        methods: {
            toggleImg() {
                this.imgIndex = (this.imgIndex + 1) % (this.bgImg).length
            }
        }
    }
</script>

首先,不用換圖片,css旋轉(zhuǎn)就好
切換class來控制css變換

<template>
    <div>
        <button @click="showIcon = !showIcon">排序</button>
        <i :class="`icon ${showIcon ? 'up' : 'down'}`"></i>
    </div>
</template>

data () {
    return {
        showIcon: false
    }
}

希望幫助到你

        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3 text-center">
                    <div id="app">
                        <button @click="sort">排序</button>
                        <i class="fa el-down-icon" v-show="downIcon"></i>
                        <i class="fa el-up-icon" v-show="!downIcon"></i>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    downIcon: true
                },
                methods: {
                    sort() {
                        //根據(jù)你的downIcon判斷此時的排序是升序還是降序
                        //...排序方式
                        this.downIcon = !this.downIcon
                    }
                }
            })
        </script>

其實(shí)是不建議你這么換圖片的，可以用css寫個動畫讓圖片旋轉(zhuǎn)180°，還有就是多看看官方的文檔，這些都是很基礎(chǔ)的一些知識vue官網(wǎng)

<img src="向上的箭頭" v-show="showUpImg" @click="changeImg">
<img src="向下的箭頭" v-show="!showUpImg" @click="changeImg">

//設(shè)置一個變量標(biāo)識
data(){
    return{
        showUpImg:true
    }
}

//方法
methods{
    changeImg:function(){
        this.showUpImg = !this.showUpImg 
    }
}