博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
VUE 动态切换列表active样式
阅读量:7113 次
发布时间:2019-06-28

本文共 357 字,大约阅读时间需要 1 分钟。

参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html

需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背景色

用到VUE样式绑定对象语法

如果 isActive 的布尔值为 true 则样式渲染,如果为false 样式不渲染

  • {
    {item}}
  • // 这里的 position === index为一个判断条件

    1、先把position定义为空

    2、点击事件生效的时候position赋值给index

    3、如果要去除这个 active 样式的话,也就只要使 isActive 为false

    完美解决

     

    转载于:https://www.cnblogs.com/xxflz/p/10192300.html

    你可能感兴趣的文章
    约瑟夫环问题
    查看>>
    Compile、Make和Build的区别(as make, build, clean, run)
    查看>>
    介绍三款串口监控工具:Device Monitoring Studio,portmon,Comspy
    查看>>
    Bulk Load-HBase数据导入最佳实践
    查看>>
    sqlServer的主键只能自增不能手动增加
    查看>>
    maven常用命令介绍
    查看>>
    【树莓派】树莓派上刷android系统
    查看>>
    J2EE之Servlet初见
    查看>>
    elasticsearch best_fields most_fields cross_fields从内在实现看区别——本质就是前两者是以field为中心,后者是词条为中心...
    查看>>
    JPA(一):简介
    查看>>
    git 的安装和使用
    查看>>
    (转) OpenCV学习笔记大集锦 与 图像视觉博客资源2之MIT斯坦福CMU
    查看>>
    Controller 接口控制器详解
    查看>>
    【转】【MySQL】mysql 通过bin-log恢复数据方法详解
    查看>>
    linux上安装启动elasticsearch-5.5.1完整步骤
    查看>>
    Silverlight 4 MVVM开发方式(一)小黑端
    查看>>
    公告:CSDN博客频道新功能正式上线!
    查看>>
    Web服务的体系架构
    查看>>
    linux下apache的使用
    查看>>
    UML对象图(转载)
    查看>>