vue關(guān)于鼠標經(jīng)過的顯示隱藏

可以給每個list item添加一個show屬性，事件監(jiān)聽改成： @mouseover="item.show=true"，“修改”這里改成：<span v-show="item.show">修改</span>

循環(huán)那里改為 v-for="(item,index) in list" @mouseover="hover(index)"
修改那個span也跟index關(guān)聯(lián)下，應(yīng)該就能確定鼠標經(jīng)過的是第幾個了吧

按照樓主的思路來改編的，代碼如下

<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:{
        //鼠標經(jīng)過
        hover:function(index){
          console.log(index)
            //這里的邏輯該怎么寫呢
            //如何判斷我鼠標經(jīng)過的是第幾個，讓他對應(yīng)的v-show變?yōu)閠rue呢？
            this.showUpdate = index
        }
    },
}
</script>
<style scoped>
.items span{
  border-bottom: 1px solid #eee
}
</style>

這個可以直接用css來寫。比較簡單

.edit {
    display: none;
}

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

這種需求就不勞煩js了吧，css足以

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

//循環(huán)時最好綁定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是請求過來的，則在請求拿到數(shù)據(jù)后處理這個。這是為每一個item增加一         個變量控制顯示隱藏
        let len = this.list.length;
        for(let i = 0; i < len;i++){
            this.list[i].is_show = false;
        }
    },
    methods:{
        //鼠標經(jīng)過
        hover:function(index){
            //這里的邏輯該怎么寫呢
            //如何判斷我鼠標經(jīng)過的是第幾個，讓他對應(yīng)的v-show變?yōu)閠rue呢？
            this.list[index].is_show = true;
        }
    },
    
    //分析：原因是一個變量無法控制。