vue鼠标滑过事件

Question

刚开始是这样的

当鼠标经过时出现“修改字样”

<div v-for="item in list" @mouseover="hover()">

    <span>{{item.icon}}</span>

    <span>{{item.text}}</span>

    <span v-show="false">修改</span>

</div>

-----------------------------

    data:{

        list:[

            {

                id:1,

                icon:"image",

                text:58

            },

            {

                id:2,

                icon:"icon",

                text:60

            },

            {

                id:3,

                icon:"pic",

                text:80

            },

        ]

    },

    methods:{

        //鼠标经过

        hover:function(){

            //这里的逻辑该怎么写呢

            //如何判断我鼠标经过的是第几个，让他对应的v-show变为true呢？

        }

    },

Answer 1

这种需求就不劳烦js了吧，css足以.item>.btn{&nbsp;visibilty:hidden&nbsp;} .item:hover>.btn{&nbsp;visibilty:visible&nbsp;}