Vue.jsでマウスオーバーした時の表示の切り替え

Vue.jsでマウスオーバーした時の表示の切り替え

2829 回閲覧されました

Vue.jsでマウスオーバーした時に要素が現れる為のコードの解説です。

デモは↓で「マウスオーバーしてください」と書いてある所をマウスオーバーすると「マウスオーバーしました」が現れます。

コードを↓にします。

15行目〜18行目の「マウスオーバーしました」を表示させるとします。

マウスオーバーした時に表示させるのでv-ifディレクティブを使います。

v-ifディレクティブの条件のhoverは最初falseにします。(27行目)

11行目の「mouseover」がマウスオーバーした時のイベントで12行目の「mouseleave」がマウスオーバーを外した時のイベントです。

11行目の「mouseOver」の中身は30行目〜32行目で12行目の「mouseLeave」の中身は33行目〜35行目です。

「マウスオーバーしてください」をマウスオーバーした時にhoverがtrueになればいいので31行目があり「マウスオーバーしてください」からマウスを離したときにhoverがfalseになればいいので34行目があります。

これで完成です。