VUE 动态切换列表active样式
参考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样式的更多相关文章
- jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
- 第八十七篇:Vue动态切换组件的展示和隐藏
好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...
- vue动态切换视图
big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...
- vue动态切换组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- vue动态切换页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)
在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...
- vuejs导航条动态切换active状态
用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下 ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar
在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...
随机推荐
- Spark Streaming实践和优化
发表于:<程序员>杂志2016年2月刊.链接:http://geek.csdn.net/news/detail/54500 作者:徐鑫,董西成 在流式计算领域,Spark Streamin ...
- Spark性能调优-高级篇
前言 继基础篇讲解了每个Spark开发人员都必须熟知的开发调优与资源调优之后,本文作为<Spark性能优化指南>的高级篇,将深入分析数据倾斜调优与shuffle调优,以解决更加棘手的性能问 ...
- 吴裕雄--天生自然Numpy库学习笔记:NumPy 字符串函数
这些函数在字符数组类(numpy.char)中定义. add() 对两个数组的逐个字符串元素进行连接 multiply() 返回按元素多重连接后的字符串 center() 居中字符串 capitali ...
- 判断一个数组是否包含一个指定的值 includes-ES6
var array1 = [1, 2, 3]; console.log(array1.includes(2)); // trueconsole.log(array1.includes(2, 5)); ...
- ipfs 资料汇集
目录 js ipfs u can use wikipeida here js ipfs https://github.com/ipfs/js-ipfs u can use wikipeida here ...
- Edge Beta Android版更新已启用新图标
导读 微软Edge Beta Android版更新已启用新图标设计 IT之家消息 适用于Android的Microsoft Edge Beta已于近日获得更新,最显著的特征就是使用了新图标设计.该图标 ...
- Pandas的Categorical Data类型
pandas从0.15版开始提供分类数据类型,用于表示统计学里有限且唯一性数据集,例如描述个人信息的性别一般就男和女两个数据常用'm'和'f'来描述,有时也能对应编码映射为0和1.血型A.B.O和AB ...
- Maven的安装与配置(eclipse,idea)
Maven的安装与配置 一.需要准备的东西 1. JDK 2. Maven程序包 3. Eclipse 4. Idea 二.下载与安装 1. 前往https://maven.apache.org/ ...
- redhat 7.6 安装 git
1.下载git包 下载网址:https://mirrors.edge.kernel.org/pub/software/scm/git/ //自己下载想要的版本 或者直接在Linux 直接使用wge ...
- 20199317 myod实验
myod实验 实验内容: 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 3 main与其他分开,制作静态库和动态库 4 编写Mak ...