Vue.jshover로 원소가 나오는 방법

Vue.나는 js에서 마우스의 호버 동작으로 어떤 요소를 등장시키고 싶을 때가 있다고 생각한다.
이럴 때, 나는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가 데이터의 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>