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

按照楼主的思路来改编的，代码如下

<template>
  <div>
<div v-for="(item, index) in list" @mouseover="hover(index)" @mouseout="showUpdate = -1" :key="item.id" class="items">
    <span>{{item.icon}}</span>
    <span>{{item.text}}</span>
    <span v-show="showUpdate == index">修改</span>
</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      showUpdate: -1,
        list:[
            {
                id:1,
                icon:"image",
                text:58
            },
            {
                id:2,
                icon:"icon",
                text:60
            },
            {
                id:3,
                icon:"pic",
                text:80
            },
        ]
    }
  },
      methods:{
        //鼠标经过
        hover:function(index){
          console.log(index)
            //这里的逻辑该怎么写呢
            //如何判断我鼠标经过的是第几个，让他对应的v-show变为true呢？
            this.showUpdate = index
        }
    },
}
</script>
<style scoped>
.items span{
  border-bottom: 1px solid #eee
}
</style>

Answer 2

可以给每个list item添加一个show属性，事件监听改成： @mouseover="item.show=true"，“修改”这里改成：<span v-show="item.show">修改</span>

Answer 3

这个可以直接用css来写。比较简单

.edit {
    display: none;
}

.edit:hover {
    display: inline-block;
}

Answer 4

//循环时最好绑定key值
<div v-for="(item,index ) in list" :key='index'>
    <div @mouseover="hover(index)">
         <span>{{item.icon}}</span>
        <span>{{item.text}}</span>
        <span v-show="item.is_show">修改</span>
    </div>
</div>
-----------------------------
    data:{
        list:[
            {
                id:1,
                icon:"image",
                text:58
            },
            {
                id:2,
                icon:"icon",
                text:60
            },
            {
                id:3,
                icon:"pic",
                text:80
            },
        ]
    },
    mounted(){
        //如果list是请求过来的，则在请求拿到数据后处理这个。这是为每一个item增加一         个变量控制显示隐藏
        let len = this.list.length;
        for(let i = 0; i < len;i++){
            this.list[i].is_show = false;
        }
    },
    methods:{
        //鼠标经过
        hover:function(index){
            //这里的逻辑该怎么写呢
            //如何判断我鼠标经过的是第几个，让他对应的v-show变为true呢？
            this.list[index].is_show = true;
        }
    },
    
    //分析：原因是一个变量无法控制。

Answer 5

这种需求就不劳烦js了吧，css足以

.item>.btn{ visibilty:hidden }
.item:hover>.btn{ visibilty:visible }