vue使用v-for实现悬停点击效果

使用Vue实现鼠标悬停效果。您可以使用事件处理程序v-on指令(缩写为：@)。将mouseenter和mouseleave事件绑定到标记。

悬停是css中的一个选择器，用于选择鼠标指针浮动的元素。因此，当鼠标悬停在超链接上时，a:hover可用于设置超链接的样式。

在当今流行的前端框架中，vue react以数据驱动的形式修改元素的状态，而不是以前用jq来操作dom元素，这也是非常低效的。像vue一样，react以虚拟dom的形式呈现页面，并使用数据更改来更新虚拟dom，从而更新页面。

要实现的Jquery

1.给li绑定悬停事件

@mouseover='hover(index)'

2.在悬停功能中操作dom eq，选择当前悬停的li修改其样式，选择其他li修改其样式。

hover:函数(索引){ console.log(索引)；$ ('ul Li ')。eq(指数)。CSS ({ '背景' :' # CCC '，'颜色' :' # fff'})。兄弟姐妹()。CSS ({ '背景' :' # fff '，'颜色

首先，在不同的状态下写两种风格。悬停{ background: # ccccolor: # fff}.点击{ background: redcolor: # fff}然后将两个值绑定到这两个状态

导出默认值{ data : function(){ return { item arr :[' A '，' B '，' C '，' D']，悬停索引： -1，//它表示最初为-1或null时的第一个li Click索引： -1不能为0 0。//表示第一个li最初为-1或者null不能为0 0，表示第一个li}}。} hover使hoverIndex等于hover的Li，单击时也是如此。

@ mouse over=' hover index=index ' @ click=' click index=index '当鼠标移出并取消移出状态时，悬停的li为-1或null

@mouseout='hoverIndex=-1 '，然后使用hoverIndex和clickIndex来实现li不同类名的效果

: class=' { ' click BG ' : index==click index，' hover BG ' : index==hover index } '如果你熟练，你可以做出更多的东西，不同的风格可以用不同的li渲染

所有代码如下：

模板ul类='item' li v-for='(item，index)在item arr ' : key=' index ' : class=' { ' click BG ' : index=' click index '，' HeaLTH BG ' : index==HeaLTH index } ' @ click index=index ' @ mouseover=' HeaLTH index ' @ mouseout=' HeaLTH index=-1 ' { item } }/Li/ul/模板脚本导出默认{ data 3: function(){ template script//表示当前点击的li，初始值为-1或null不能为0，表示第一个Li}}，}/scriptstyle。项目{ width: 600px高度： 60px；} .项目li { width: 80px高度： 60px；线高： 60px；左边距left: 20px向左浮动：文本对齐：中心；cursor:指针；} .悬停{ background: # ccccolor: # fff} .点击{ background: redcolor: # fff}/样式摘要

上面提到的是边肖介绍给大家的vue使用v-for实现悬停点击效果，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！