版权声明:出处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来替换。

Vuejs(14)——在v-for中,利用index来对第一项添加class的更多相关文章

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

    <li v-for="(el,index) in event" v-bind:class="{ 'm-swipe-active': !index}"> ...

  2. ionic中ng-options与默认选中第一项的问题

    1. select中动态添加数据时发现一个选项为空,在选中了其他选项时,在点击时发现第一个空选项消失了,所有我们需要设置一个默认的选项: 2. 开始的时候我用的方法: <select class ...

  3. C#开发微信门户及应用(14)-在微信菜单中采用重定向获取用户数据

    我曾经在系列文章中的<C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍>中介绍了微信菜单里面的重定向操作,通过这个重定向操作,我们可以获取一个code值,然后获取用户的open ...

  4. Oracle基础学习(二)v$session中Command的数字含义

    v$session中Command的数字含义. 1 CREATE TABLE 2 INSERT 3 SELECT 4 CREATE CLUSTER 5 ALTER CLUSTER 6 UPDATE 7 ...

  5. nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

  6. Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

    使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...

  7. springMVC中利用model在JSTL进行回填值

    1.ringMVC中利用model回填值 后台中,利用model返回值,如 model.addAttribute("MS_info" , MS_info); 前台回填值: text ...

  8. 【转】asp.net中利用session对象传递、共享数据[session用法]

    来自:http://blog.unvs.cn/archives/session-transfer-method.html 下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值 ...

  9. asp.net中利用session对象传递、共享数据[session用法]

    下面介绍Asp.net中利用session对象传递.共享数据用法: 1.传递值: 首先定义将一个文本值或单独一个值赋予session,如下: session[“name”]=textbox1.text ...

随机推荐

  1. leetcode301

    class Solution { public List<String> removeInvalidParentheses(String s) { List<String> a ...

  2. DRF框架之 serializers 序列化组件

    1. 什么是序列化,其实在python中我们就学了序列化工具json工具,就是吧信息存为类字典形式 2. DRF框架自带序列化的工具: serializers 3. DRF框架 serializers ...

  3. json&pickle&shelve模块

    之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊类型的时候,eval就不管用了 ...

  4. 6.Python enumerate 特性

    enumerate()可参考: list1 = ["这", "是", "一个", "测试"] for index,ite ...

  5. LeetCode OJ 117. Populating Next Right Pointers in Each Node II

    题目 Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode * ...

  6. C#面向对象架构总结

    优秀的程序从命名开始,命名规则1.类名方法名需要见名知意.2.类的字段统统首字母小写并且封装仅供本类使用,并提供属性供外界使用,属性名开头大写,如果名字与类名冲突,那么在前面加下划线. 面向对象的7大 ...

  7. vivo手机,自带世界之窗浏览器,sessionStorage设置的值为null

    最近遇到一个小问题 用vivo手机自带浏览器,每次跳转到一个新页面都是重新打开一个webpage,导致sessionStorage设置的值都没了. 所以开发移动端网页时,谨慎使用sessionStor ...

  8. 最小费用最大流 HDU1533

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1533 #include<bits/stdc++.h> #define fi first ...

  9. 机器学习性能指标(ROC、AUC、召回率)

    混淆矩阵 构造一个高正确率或高召回率的分类器比较容易,但很难保证二者同时成立 ROC 横轴:FPR(假正样本率)=FP/(FP+TN) 即,所有负样本中被分错的比例 纵轴:TPR(真正样本率)=TP/ ...

  10. FortiGate日志中session clash

    1.出现于:FortiGate v5.0和v5.2 2.出现原因 Session clash messages appear in the logs when a new session is cre ...