用Vue写个开关控制两张图的切换，点击换张图，再次点击就换回去

Question

具体的就是点击这个排序，后面的箭头换张向上的图片，再次点击换回来，又变成这个向下的图片，用Vue该怎么写呀？
补充：具体的道理我都明白，是做个判断，但是具体的代码实现，还是遇到了一些问题，劳烦大佬给实现的代码也写出来吧！拜托了

Answer 1

        <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() {
                        //根据你的downIcon判断此时的排序是升序还是降序
                        //...排序方式
                        this.downIcon = !this.downIcon
                    }
                }
            })
        </script>

其实是不建议你这么换图片的，可以用css写个动画让图片旋转180°，还有就是多看看官方的文档，这些都是很基础的一些知识vue官网

Answer 2

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

data () {
    return {
        showIcon: false
    }
}

---

希望帮助到你

Answer 3

我觉得这种方法更灵活些，楼主觉得呢？这也是很多轮播图常用的逻辑

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

<script>

    export default {
        data() {
            return {
                bgImg: ['../a.jpg', '../b/jpg'],
                imgIndex: 0
            }
        },
        computed: {
            imgSrc() {
                //计算图标地址
                return bgImg[this.imgIndex]
            }
        },
        methods: {
            toggleImg() {
                this.imgIndex = (this.imgIndex + 1) % (this.bgImg).length
            }
        }
    }
</script>

Answer 4

首先,不用换图片,css旋转就好
切换class来控制css变换

Answer 5

template标签里写两个<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},就可以了

Answer 6

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

//设置一个变量标识
data(){
    return{
        showUpImg:true
    }
}

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