Vuejs(14)——在v-for中,利用index来对第一项添加class
版权声明:出处http://blog.csdn.net/qq20004604
(1)在v-for中,利用index来对第一项添加class
- <a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement">
index来源于v-for,i表示遍历的数组的元素,index表示索引。
由于index从0开始,因此如果要指定第一项有active这个类,那么就用v-bind:class="{'active':!index}"
第一项原本是false(0),第二项和之后是true(>0),通过逻辑非操作符,让其值反转。
因此,第一项有active这个类,而后面的没有。
如果除了第一项之外有某个类,也可以通过不加逻辑非操作符来达到。
类似的,可以用index==2这样的表达式来让第三项获得这个类。
注意,我的版本是Vuejs2.0,因此貌似不能用$index来替换。
Vuejs(14)——在v-for中,利用index来对第一项添加class的更多相关文章
- 在v-for中利用index来对第一项添加class(vue2.0)
<li v-for="(el,index) in event" v-bind:class="{ 'm-swipe-active': !index}"> ...
- ionic中ng-options与默认选中第一项的问题
1. select中动态添加数据时发现一个选项为空,在选中了其他选项时,在点击时发现第一个空选项消失了,所有我们需要设置一个默认的选项: 2. 开始的时候我用的方法: <select class ...
- C#开发微信门户及应用(14)-在微信菜单中采用重定向获取用户数据
我曾经在系列文章中的<C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍>中介绍了微信菜单里面的重定向操作,通过这个重定向操作,我们可以获取一个code值,然后获取用户的open ...
- Oracle基础学习(二)v$session中Command的数字含义
v$session中Command的数字含义. 1 CREATE TABLE 2 INSERT 3 SELECT 4 CREATE CLUSTER 5 ALTER CLUSTER 6 UPDATE 7 ...
- nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例
## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express 项目名 --view=ejs 或express -e 项目名 ## ...
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- springMVC中利用model在JSTL进行回填值
1.ringMVC中利用model回填值 后台中,利用model返回值,如 model.addAttribute("MS_info" , MS_info); 前台回填值: text ...
- 【转】asp.net中利用session对象传递、共享数据[session用法]
来自:http://blog.unvs.cn/archives/session-transfer-method.html 下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值 ...
- asp.net中利用session对象传递、共享数据[session用法]
下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值: 首先定义将一个文本值或单独一个值赋予session,如下: session[“name”]=textbox1.text ...
随机推荐
- py库: flask笔记
http://flask.pocoo.org/ http://flask.pocoo.org/docs/0.12/api/#api API http://docs.pythontab.com/flas ...
- activemq 无法消费! consumers are alive when the messages are stuck !
我的微服务中, activemq 消费 一条消息的时候, 出了错, 结果导致了 那条消息就一直处于pending 状态, queue.user.545c2ed5-fee7-482a-bb59-564b ...
- 201772020113李清华《面向对象程序设计(java)》第八周学习总结
实验六 接口的定义与使用 实验时间 2018-10-18 1.实验目的与要求 (1) 掌握接口定义方法: (2) 掌握实现接口类的定义要求: (3) 掌握实现了接口类的使用要求: (4) 掌握程序回调 ...
- JEECG 上传插件升级-代码生成器
前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此 ...
- Linux常用基础操作命令大全(超实用精心整理)
相信大家都对黑客那种只用命令行对电脑操作的风格惊呆了,其实你也可以做到.linux是一款不同于windows的操作系统,而且它是黑客.渗透人员.运维人员等等必会的.如果你想学习,小编下面整理的命令将会 ...
- SQLLDR导入乱码问题的解决
SQLLDR导入乱码问题的解决 处理过程: 1.本地建立控制文件 load data infile 'd:\TMP_KAITOUSHUJU.csv' into table TMP_KAITOU ...
- 数据库-1055报错-把only_full_group_by去掉
[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated c ...
- 大数据学习笔记2 - 分布式文件系统HDFS(待续)
分布式文件系统结构 分布式文件系统是一种通过网络实现文件在多台主机上进行分布式存储的文件系统,采用C/S模式实现文件系统数据访问,目前广泛应用的分布式文件系统主要包括GFS和HDFS,后者是前者的开源 ...
- 配置MQTT服务器
第一步:下载一个Xshell 链接:https://pan.baidu.com/s/16oDa5aPw3G6RIQSwaV8vqw 提取码:zsb4 打开Xshell 前往MQTT服务器软件下载地址: ...
- ExecuteNonQuery()
ExecuteNonQuery():执行一个SQL语句,返回受影响的行数,这个方法主要用于执行对数据库执行增加.更新.删除操作,注意查询的时候不是调用这个方法.用于完成insert,delete,up ...