怎么在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渲染不同的样式

全部代码如下:

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。