怎么在vue中利用v-for实现一个hover点击效果

怎么在vue中利用v-for实现一个hover点击效果？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

1.给li来绑定hover事件

@mouseover="hover(index)"

2.在hover函数内去操作dom eq选中当前hover的li去修改它的样式, siblings()选中其他的li修改样式

hover: function(index){   console.log(index);   $('ul li').eq(index).css({     'background': '#ccc',     'color': '#fff'   }).siblings().css({     'background': '#fff',     'color': '#333'   }) }

vue 利用不同的class名来实现

首先写两个不同状态的样式

.hoverBg{   background: #ccc;   color: #fff; } .clickBg{   background: red;   color: #fff; }

然后给两个状态绑定两个值

export default {   data: function(){     return {       itemArr:['A','B','C','D'],       hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li       clickIndex: -1, //表示当前点击的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li     }   }, }

hover的时候让hoverIndex等于hover的li,点击时候一样

@mouseover="hoverIndex = index" @click="clickIndex = index"

鼠标移出又取消移出状态 即让hover的li为 -1 或 null

@mouseout="hoverIndex = -1"

然后利用 hoverIndex 和 clickIndex 来给li不同的class名 实现效果

:class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"

用的熟练了就可以做出更多的东西,不同li渲染不同的样式

全部代码如下:

<template>   <ul class="item">     <li v-for="(item, index) in itemArr" :key="index"       :class="{'clickBg':index==clickIndex,'hoverBg':index==hoverIndex}"       @click="clickIndex = index"       @mouseover="hoverIndex = index"       @mouseout="hoverIndex = -1">       {{item}}     </li>   </ul> </template> <script>  export default {    data: function(){      return {        itemArr:['A','B','C','D'],        hoverIndex: -1, //表示当前hover的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li        clickIndex: -1, //表示当前点击的是第几个li 初始为 -1 或 null 不能为0 0表示第一个li      }    },  } </script> <style>  .item{    width: 600px;    height: 60px;  }  .item li{    width: 80px;    height: 60px;    line-height: 60px;    margin-left: 20px;    float: left;    text-align: center;    cursor: pointer;  }  .hoverBg{    background: #ccc;    color: #fff;  }  .clickBg{    background: red;    color: #fff;  } </style>

关于怎么在vue中利用v-for实现一个hover点击效果问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。