#vue# @click="" realiza clic para cambiar diferentes imágenes

1. Requisitos:

Cuando el mouse hace clic en la imagen, se muestra otra imagen y cuando se hace clic nuevamente, se muestra la imagen original.

2. Efecto:

Imagen original:

Después de hacer clic, cambie a otra imagen:

 

 Haga clic nuevamente para cambiar a la imagen anterior:

 3. Pasos e ideas:

(1) Definir el valor predeterminado inicial de la variable

data () {
        return {
            userShow:true
        }
    }

(2) Configure dos imágenes, una se muestra de forma predeterminada y la otra se oculta (negando), y la visualización u ocultación se juzga por 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) En los métodos, cambie el estado de userShow a través del evento de clic para cambiar de imagen

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