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

这篇文章主要为大家详细介绍了Vuejs在v-for中,利用index来对第一项添加class的方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

（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在v-for中,利用index来对第一项添加class的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/4461-0.html

注：关于Vuejs在v-for中,利用index来对第一项添加class的方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js