vue使用v-for实现hover点击效果
作者:会游泳de哈士奇 时间:2024-05-02 17:09:03
使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。
hover是css中的选择器,用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。
在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变化来更新虚拟dom, 从而更新页面.
jquery 来实现
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点击效果网站的支持!
来源:https://blog.csdn.net/qq_41916815/article/details/82883070
标签:vue,点击,hover
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python的iOS自动化打包实例代码
2022-04-18 01:15:19
![](https://img.aspxhome.com/file/2023/4/95774_0s.jpg)
详解javascript中var与ES6规范中let、const区别与用法
2024-05-09 15:06:17
asp去除html的函数代码分析附实例说明
2023-07-02 20:09:18
Python如何使用print()函数输出格式化字符串
2021-03-09 22:43:41
![](https://img.aspxhome.com/file/2023/5/86345_0s.png)
Sql Server查询性能优化之不可小觑的书签查找介绍
2012-05-22 18:24:53
Python中JSON的使用方法(超详细)
2023-11-15 23:04:19
![](https://img.aspxhome.com/file/2023/7/63947_0s.png)
Go如何优雅的使用字节池示例详解
2024-02-10 21:10:17
Python EOL while scanning string literal问题解决方法
2021-01-20 23:58:38
![](https://img.aspxhome.com/file/2023/2/133462_0s.png)
pygame实现贪吃蛇小游戏
2023-04-18 19:09:07
![](https://img.aspxhome.com/file/2023/2/105722_0s.jpg)
什么是响应式Web设计?怎样进行?
2011-11-21 17:00:40
JavaScript实现点击改变图片形状(transform应用)
2024-05-13 09:18:32
![](https://img.aspxhome.com/file/2023/5/125935_0s.jpg)
pip install python-Levenshtein失败的解决
2023-07-31 05:17:28
![](https://img.aspxhome.com/file/2023/0/118800_0s.png)
js实现模拟银行卡账号输入显示效果
2024-04-16 09:13:35
![](https://img.aspxhome.com/file/2023/4/136664_0s.png)
Python基于mediainfo批量重命名图片文件
2021-08-20 11:31:30
![](https://img.aspxhome.com/file/2023/6/70066_0s.jpg)
Python实现的根据IP地址计算子网掩码位数功能示例
2021-08-30 21:21:31
![](https://img.aspxhome.com/file/2023/5/117345_0s.png)
获取python的list中含有重复值的index方法
2022-03-06 20:54:02
Python实现简单图像缩放与旋转
2022-02-19 05:48:17
![](https://img.aspxhome.com/file/2023/8/92168_0s.png)
Django REST 异常处理详解
2023-06-19 02:40:34
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2023-06-06 22:45:50
![](https://img.aspxhome.com/file/2023/2/55472_0s.png)
python3中dict(字典)的使用方法示例
2022-06-14 11:44:39