版权声明:出处http://blog.csdn.net/qq20004604

(1)在v-for中,利用index来对第一项添加class

  1. <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来替换。

最新文章

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

热门文章

  1. cv2的安装
  2. spring 之 注入之 by name or by type, or both ?
  3. &lt;thinkphp51&gt;如何安装cpmposer和tp51
  4. 001之IP基础对话框
  5. python 的类装饰器
  6. MYSQL性能优化(1)
  7. GDI+_SavePic
  8. tfs填坑那些事
  9. SSM商城项目(八)
  10. java引用