vue 动态改变css 不立即呈现

哈雷路亚 发布于 2017/07/20 16:11
阅读 1K+
收藏 1

开源之夏第三届火热来袭,高校学生参与赢万元奖金!>>>

代码如下:
<dd id="menuLevel1" v-for="(item,index) in menuShowList"
    :class="{'oneMenuLevel': !item.menuSelected ,'oneMenuLevelFloat':item.menuSelected}"
    @mouseover="oneMenuLevelOver(item)"

>
     {{item.title}}
</dd>

当我改变item中的menuSelected值,界面并没有立即就改变样样式,而是我再次显示这个界面的时候才会出现变化

加载中
1
闪电阿鸵
闪电阿鸵
该评论暂时无法显示,详情咨询 QQ 群:点此入群
0
哈雷路亚
哈雷路亚

我最后这么解决了:

应该改变list中的属性并不能,告诉vue重新加载list ,所以list中的值还是旧值,

最终还是通过变量驱动css

 解决方案如下:

<!--知识点menuIndex赋值 动态切换样式事例-->
<dd id="menuLevel1" v-for="(item,index) in menuShowList"
    :class="[{'oneMenuLevelFloat': menuIndex==index }, 'oneMenuLevel'] "
    @mouseover="oneMenuLevelOver(index)"
>
     {{item.title}}
</dd>
//选择一级菜单
oneMenuLevelOver: function (index) {
    this.menuIndex = index
},
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部