Vue shows and hides the mouse over

it was like this at first

clipboard.png

""

clipboard.png

<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-showtrue
        }
    },

adapted according to Lou Zhu's idea, the code is as follows

<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-showtrue
            this.showUpdate = index
        }
    },
}
</script>
<style scoped>
.items span{
  border-bottom: 1px solid -sharpeee
}
</style>

you can add a show attribute to each list item. Event listener can be changed to: @ mouseover= "item.show=true" , and "modify" to: < span show = "item.show" > modify


this can be written directly in css. It is relatively simple

.edit {
    display: none;
}

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

.item>.btn{ visibilty:hidden }
.item:hover>.btn{ visibilty:visible }
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bdc467-312de.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bdc467-312de.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?