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

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

用到VUE样式绑定对象语法

<div v-bind:class="{ active: isActive }"></div>

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

<li class="list-group-item"  v-for="(item,index) in menuItems" :key="item.index" @click="addClass(index)" :class="{'active':position === index}">{{item}}</li>  // 这里的 position === index为一个判断条件

1、先把position定义为空

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

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

完美解决

VUE 动态切换列表active样式的更多相关文章

  1. jquery动态添加列表后样式失效解决方式

    最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...

  2. 第八十七篇:Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  3. vue动态切换视图

    big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...

  4. vue动态切换组件

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  5. vue动态切换页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)

    在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...

  7. vuejs导航条动态切换active状态

    用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下 ...

  8. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  9. 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

    在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...

随机推荐

  1. Spark Streaming实践和优化

    发表于:<程序员>杂志2016年2月刊.链接:http://geek.csdn.net/news/detail/54500 作者:徐鑫,董西成 在流式计算领域,Spark Streamin ...

  2. Spark性能调优-高级篇

    前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问 ...

  3. 吴裕雄--天生自然Numpy库学习笔记:NumPy 字符串函数

    这些函数在字符数组类(numpy.char)中定义. add() 对两个数组的逐个字符串元素进行连接 multiply() 返回按元素多重连接后的字符串 center() 居中字符串 capitali ...

  4. 判断一个数组是否包含一个指定的值 includes-ES6

    var array1 = [1, 2, 3]; console.log(array1.includes(2));  // trueconsole.log(array1.includes(2, 5)); ...

  5. ipfs 资料汇集

    目录 js ipfs u can use wikipeida here js ipfs https://github.com/ipfs/js-ipfs u can use wikipeida here ...

  6. Edge Beta Android版更新已启用新图标

    导读 微软Edge Beta Android版更新已启用新图标设计 IT之家消息 适用于Android的Microsoft Edge Beta已于近日获得更新,最显著的特征就是使用了新图标设计.该图标 ...

  7. Pandas的Categorical Data类型

    pandas从0.15版开始提供分类数据类型,用于表示统计学里有限且唯一性数据集,例如描述个人信息的性别一般就男和女两个数据常用'm'和'f'来描述,有时也能对应编码映射为0和1.血型A.B.O和AB ...

  8. Maven的安装与配置(eclipse,idea)

    Maven的安装与配置   一.需要准备的东西 1. JDK 2. Maven程序包 3. Eclipse 4. Idea 二.下载与安装 1. 前往https://maven.apache.org/ ...

  9. redhat 7.6 安装 git

    1.下载git包 下载网址:https://mirrors.edge.kernel.org/pub/software/scm/git/   //自己下载想要的版本 或者直接在Linux 直接使用wge ...

  10. 20199317 myod实验

    myod实验 实验内容: 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 3 main与其他分开,制作静态库和动态库 4 编写Mak ...