外贸b2b选品/零基础seo入门教学

一、需求：

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

二、效果：

原先的图片：

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

 

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

 三、步骤及思路：

（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;}