在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变化来更新虚拟dom, 从而更新页面.
jq 来实现
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、@click
鼠标移出又取消移出状态 即让hover的li为 -1 或 null:@mouseout
然后利用 hoverIndex 和 clickIndex 来给li不同的class名 实现效果::class=""
可以灵活使用,渲染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>
转载自:https://blog.csdn.net/qq_41916815/article/details/82883070
版权声明:本文为CSDN博主「会游泳de哈士奇」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41916815/article/details/82883070