#vue# @click=“”实现点击切换不同的图片

一、需求：

鼠标点击图片时，显示另一张图片，再次点击，显示原来的图片

二、效果：

原先的图片：

点击以后，切换另外一张图片：

 

 再次点击，换为之前的图片：

 三、步骤及思路：

（1）定义好变量的初始默认值

data () {
        return {
            userShow:true
        }
    }

（2）设置好两张图片，一张默认为显示，一张为隐藏（通过取反），通过v-if来判断显示或者隐藏

<div class="actionBar" @click="getOperate()">
     <img :src="require('@/assets/user.svg')" alt="" v-if="userShow">
     <img :src="require('@/assets/user_hover.svg')" alt="" v-if="!userShow">
</div>

（3）在methods中，通过点击事件改变userShow的状态，从而进行切换图片

 //点击头像打开操作框（显示及隐藏）
 getOperate() {
     this.userShow = !this.userShow;
   }