欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

Vuejs在v-for中,利用index来对第一项添加class的方法

时间:2021-05-31 08:24:44|栏目:vue|点击:

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

在CODE上查看代码片派生到我的代码片

<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 使用value in list 循环遍历数组出现警告的问题

栏    目:vue

下一篇:Vue.js如何使用Socket.IO的示例代码

本文标题:Vuejs在v-for中,利用index来对第一项添加class的方法

本文地址:http://www.codeinn.net/misctech/132335.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有