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 ...
随机推荐
- Maven私服(Nexus)启动创建Windows服务
sc create lutao-maven-nexus binpath= D:\maven-server\nexus--\bin\nexus.exe type= own start= auto dis ...
- jquery.cookie用法及其注意点
jquery.cookie是一个轻量级的cookie插件,由于已被封装好,可拿来即用. 基本的创建.读取.删除见另一篇文章 浅谈localStorage.sessionStorage 与cookie ...
- ElasicSearch(4) 与jest结合
https://spring.io/projects/spring-data-elasticsearch https://docs.spring.io/spring-data/elasticsearc ...
- linux 杀死进程kill 等用法
kill -9 $(ps -ef | grep process_name | grep -v grep | awk '{print $2}') 稍微解释一下: awk '{print $2} ...
- 工程C++基础
大家好,我是老A.今天我们要学习的是工程C++,这是一个不可描述的东西.我主要讲的是template. template的用处是装逼,所以很重要. C++配备了函数模板和类模板.函数模板就是我们平时的 ...
- 深度学习中,使用regularization正则化(weight_decay)的好处,loss=nan
刚开始训练一个模型,自己就直接用了,而且感觉训练的数据量也挺大的,因此就没有使用正则化, 可能用的少的原因,我也就不用了,后面,训练到一定程度,accuracy不上升,loss不下降,老是出现loss ...
- Spring MVC 自动为对象注入枚举类型
原文地址:http://1358440610-qq-com.iteye.com/blog/2079048 如果一个对象里面有枚举类型的话,则Spring MVC是不能够直接进行注入的,因为它只实现了一 ...
- mysql查询语句中自定义变量(转)
转:http://blog.sina.com.cn/s/blog_1512521570102wrfl.htmlselect cost,@a:=@a+1 from testone,(select @a: ...
- c++ 面试题(算法类)
1,从无序的数据流中找到其中位数:(用大根堆和小根堆来实现) float getMidimum(vector<int>& nums) { priority_queue<int ...
- python—切片
切片就是list取值的一种方式 l = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] print(l[1:5]) #取值方式顾头不顾尾 print(l[:5]) #冒号 前面 没写代 ...