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 ...
随机推荐
- 【学习】数据处理基础知识(基本功能)【pandas】
本章介绍pandas的重要功能,只记录一些重点内容 1.重新索引 pandas对象的一个重要方法是reindex,其作用是创建一个适应用新索引的新对象 #重新索引 obj = pd.Series([4 ...
- 63(原67).纯 CSS 创作单元素点阵 loader
原文地址:https://segmentfault.com/a/1190000015444368 感想:CSS又一次让我见识到它的强大之处 --> box-shadow . box-shadow ...
- CUDA compiler driver nvcc 散点 part 1
▶ 参考[https://docs.nvidia.com/cuda/cuda-compiler-driver-nvcc/index.html] ▶ nvcc 预定义的宏 __NVCC__ // 编译 ...
- leetcode1027
最直接的思路是三层循环,但是会超时,代码如下: public class Solution { public int LongestArithSeqLength2(int[] A) { ; var l ...
- 2Linux常用命令-Liunu就该这么学
常用系统工作命令 1.echo 用于在终端输出字符串或变量提取后的值,格式为“echo [字符串 | $变量]” 2.date date "+%Y-%m-%d %H:%M:%S" ...
- <记录> PHP读取命令行参数
方法一:使用$argv or $argc参数接收 echo "接收到{$argc}个参数"; print_r($argv); [root@DELL113 lee]# /usr/lo ...
- __getitem__ __setitem__ __delitem__ 使用
#__getitem__ __setitem__ __delitem__运行设置key value值了class fun: def __init__(self): print('test') def ...
- BBS(第二天) Django之Admin 自动化管理数据页面 与创建一个用户注册的验证码
1.admin的概念 # Admin是Django自带的一个功能强大的自动化数据管理界面 # 被授权的用户可以直接在Admin中操作数据库 # Django提供了许多针对Admin的定制功能 2. 配 ...
- 微信小程序开发之保留小数(toFixed) 四舍五入 获取整数 string转int
https://blog.csdn.net/qq_31383345/article/details/52961767
- Java 虚拟机概述
虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.Java虚拟机屏蔽了与具体操作系统平 ...