Vue.jsでマウスオーバーした時の表示の切り替え
3518 回閲覧されました
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行目があります。
これで完成です。