vue.js - vue循环列表，hover不起作用

问题描述

问 题

<li class="list-group-item"v-for="data in list">

<div  class="dask">
    <button  class="btn btn-primary"  style="margin-left: 20px;">
    编辑</button>
    <button class="btn btn btn-warning">删除</button>
</div>

</li>

$(".list-group-item").hover(
function () {
$(this).find(".dask").stop().delay(50).animate({"top":0,opacity:0.5},300)
},
function () {

$(this).find(".dask").stop().animate({"top":-200,opacity:0},300)

}
);

1. 代码在上面，发现下面那个hover方法不起作用

我试着放入

v-on:mouseenter="enter" v-on:mouseleave="leave"

效果总是不尽人意

不知道大家有没有碰到过这种情况，可以讨论一下，总觉得是有解决办法的
（PS：这代码格式化我也是醉了……）

解决方案

表示已经放弃jq
对于hover，下面是我的一种方案:
html:

    <nav id="nav" @mouseover="eNavOver($event)" @mouseout="eNavOut($event)">
        <a 
            v-for="(item,index) in aNavList" 
            :href="item.href" 
            :class="{'z-hv':item.isHv}"
            :data-id="index"    
        >{{item.name}}</a>
    </nav>

    nav a{
        color:#666;
        transition:all .5s;
    }
    /*hover状态*/
    nav a.z-hv{
        color:#233;
    }

    var vNav=new Vue({
        el:'#nav',
        data:{
            aNavList:[{
                name:'a',
                href:'#nav',
                isHv:0,
            },{
                name:'b',
                href:'#nav',
                isHv:0,
            }]
        },
        methods:{
            eNavOver:function(e){
                var target=e.target;
                var i=target.getAttribute('data-id');
                if(i&&this.aNavList[i].isAtv){
                    this.aNavList[i].isHv=1;
                }
            },
            eNavOut:function(e){
                var target=e.target;
                var i=target.getAttribute('data-id');
                if(i){
                    this.aNavList[i].isHv=0
                }
            }
        },
    })

虽然代码多了点
但是好处是易于控制，事件方法高度集中在vue对象上
而且对于a下面如果有更多节点,不妨在css里面这样写：

    .z-hv span{
        color:#555
    }
    .z-hv i{
        font-size:0.8em
    }
    ...

只给a添加一个类，其余工作让css完成

这篇关于vue.js - vue循环列表，hover不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！