vue v-for实现hover效果,点击效果

在当今比较流行的前端框架里 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="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>