SOURCE

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        show: false,
        imgIndex: 1
    },
    methods: {
        handleClick: function() {
            if (this.imgIndex == 1) {
                this.imgIndex = 2;
            } else {
                this.imgIndex = 1;
            }
        }
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<div id="app">
    <div class="phone-container">
        <transition name="fade" mode="out-in">
            <img v-if="imgIndex==1" key="img1" src="https://3gimg.qq.com/tencentMapTouch/lubao/phone1.png"
            width="276" height="581" />
            <img v-if="imgIndex==2" key="img2" src="https://3gimg.qq.com/tencentMapTouch/lubao/phone2.png"
            width="276" height="581" />
        </transition>
    </div>
    <button @click="handleClick">
        切换
    </button>
</div>

.phone-container {
    position: absolute;
    width: 370px;
    height: 720px;
    border: 1px solid red;
    background-image: url("https://3gimg.qq.com/tencentMapTouch/lubao/phone_bg.png");
    background-size: 100% 100%;
    text-align: center;
}

.phone-container img {
    position: relative;
    top: 48px;
    opacity：0;
}

button {
    position: absolute;
    left: 400px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}