#vue# @click="" クリックして別の画像を切り替えることができます

1. 要件:

画像上でマウスをクリックすると別の画像が表示され、再度クリックすると元の画像が表示されます

2.効果:

元の画像:

クリック後、別の画像に切り替えます。

 

 もう一度クリックすると、前の画像に変わります。

 3. 手順とアイデア:

(1) 変数の初期デフォルト値を定義する

data () {
        return {
            userShow:true
        }
    }

(2) 画像を 2 つ設定し、1 つはデフォルトで表示、もう 1 つは非表示 (否定) にし、表示か非表示かを 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) メソッド内で、クリックイベントを通じて userShow の状態を変更し、画像を切り替えます

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