Vuejs(14)——在v-for中,利用index来对第一项添加class
2024-10-19 00:33:27
版权声明:出处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来替换。
最新文章
- No compatible targets were found.Do you wish to...的解决方案。
- BZOJ 2648: SJY摆棋子
- 用LinqPad查看Nhibernate生成的sql语句
- 网吧局域网里的设置外网IP地址、设置内网IP地址、限制内网速度和路由器共享
- cocos 事件分发2
- Objective-C 引用计数:不讲用法,只说原理
- XOR双向链表
- next_permutation(全排列算法)
- KoaHub.js:使用ES6/7特性开发Node.js框架
- ArchSummit全球架构师峰会2017年深圳站 漫谈
- 从.net到java,记录下这三个月的工作
- 第一次作业-----四则运算题目生成(基于java)
- java造成内存泄露原因
- Flask 系列之 Migration
- Bootstrap-datepicker3官方文档中文翻译---概述(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)
- 理解 OAuth2.0
- $.isPlainObject
- css控制继承
- Xamarin+Prism开发详解七:Plugin开发与打包测试
- html 统一资源定位器(url)和url编码