Vue.jsでhoverしたら要素を出現させる方法

Vue.jsでマウスのhoverアクションで何か要素を出現させたい時があるかと思います。
そんな時は、mouseoverとmouseleaveを使います。

index.html

<p v-on:mouseover="mouseOverAction" v-on:mouseleave="mouseLeaveAction">{{message}}</p>

mouseoverはマウスが乗った時、mouseleaveはマウスが外れた時にイベントが発火します。
これとv-ifを組み合わせるとマウスが乗った時に要素を出現させることができます。

index.html

    <div id="app">
        <div class="container">
            <p v-on:mouseover="mouseOverAction" v-on:mouseleave="mouseLeaveAction">{{message}}</p>
            <p v-if="hoverFlag">hoverされました</p>
     　　</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                message: 'hoverしてください',
                hoverFlag: false,
            },
            methods: {
                mouseOverAction(){
                    this.hoverFlag = true
                },
                mouseLeaveAction(){
                    this.hoverFlag = false
                }
            }
        })
    </script>

mouseover、mouseleaveでdataのhoverFlagを更新しています。それによりif文のtrueとfalseが入れ替わります。
v-showでも可能です。

また、引数をとることができるので、for文で複数の要素がある場合でも特定の要素だけを対象にすることができます。

index.html

   <div id="app">
        <div class="container">
            <div v-for="(num,index) in 5">
                <p v-on:mouseover="mouseOverAction(index)" v-on:mouseleave="mouseLeaveAction(index)">{{message}}</p>
                <p v-show="hoverFlag && index === hoverIndex ">hoverされました</p>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                message: 'hoverしてください',
                hoverFlag: false,
                hoverIndex: null,
            },
            methods: {
                mouseOverAction(index){
                    this.hoverFlag = true
                    this.hoverIndex = index
                },
                mouseLeaveAction(){
                    this.hoverFlag = false
                }
            }
        })
    </script>