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 ...
随机推荐
- HBuilder ,及自用主题
字体:Consolas http://bbs.csdn.net/topics/390858585 让代码更美:你最爱的编程字体 http://www.dcloud.io HBuilder下载 htt ...
- 03 字符串常用操作方法及For 循环
字符串常用操作 s = 'alexWUsir' s1 = s.capitalize() #首字母大写 print(s1) #Alexwusir s2 = s.upper() #全部大写 print(s ...
- python中__get__,__getattr__,__getattribute__的区别
__get__,__getattr__和__getattribute都是访问属性的方法,但不太相同. object.__getattr__(self, name) 当一般位置找不到attribute的 ...
- threading 多线程使用
实例 1import threading #线程import time def Say(n): print('Test %d' %n) time.sleep(2) if __name__ == '__ ...
- JEECG-Swagger UI的使用说明
一.代码生成 (此步骤为代码生成器的使用,如不清楚请查阅相关文档视频) 1.进入菜单[在线开发]-->[Online表单开发],选中一张单表/主表,点击代码生成按钮. 2.弹出页面中填写代码生成 ...
- Linux命令:cd
语法 cd [-L|[-P [-e]]] [dir]改变shell当前工作目录.仅对执行命令所在的shell有效. 参数 -L 按符号链接进入目录. -P 按物理链接进入目录 -e 如果指 ...
- kubectl-常用命令
出处https://cloud.tencent.com/developer/article/1140076 kubectl apply -f kubernetes-dashboard.yaml -n ...
- LeetCode OJ 129. Sum Root to Leaf Numbers
题目 Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a num ...
- ubuntu安装gitlab-ci-runner、注册
首先信任 GitLab 的 GPG 公钥: curl https://packages.gitlab.com/gpg.key 2> /dev/null | sudo apt-key add - ...
- 使用Pyquery+selenium抓取淘宝商品信息
配置文件,配置好数据库名称,表名称,要搜索的产品类目,要爬取的页数 MONGO_URL = 'localhost' MONGO_DB = 'taobao' MONGO_TABLE = 'phone' ...