vue v |
您所在的位置:网站首页 › js中hover › vue v |
在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变化来更新虚拟dom, 从而更新页面. 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渲染不同的样式 全部代码如下: {{item}} 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 } }, } .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; } |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |