版权声明:出处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. Android 开发 框架系列 EventBus 事件总线

    介绍 GitHub:https://github.com/greenrobot/EventBus 先聊聊EventBus 线程总线是干什么的,使用环境,优点.缺点. 干什么的? 一句话,简单统一数据传 ...

  2. Jenkins部署报weblogic.deploy.api.tools.deployer.DeployerException: Java heap space

    Jenkins部署报weblogic.deploy.api.tools.deployer.DeployerException: Java heap space异常 解决办法: 在MAVEN_OPTS中 ...

  3. 收藏 —— KVM网络虚拟化

    http://www.cnblogs.com/CloudMan6/p/5240770.html http://www.cnblogs.com/CloudMan6/p/5289590.html

  4. 1.Ansible安装以及配置

    本节内容以Centos7为系统环境进行讲解: 1.安装epel源,方便直接yum安装: wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun ...

  5. request设置cookies

    mycookie = { "PHPSESSID":"56v9clgo1kdfo3q5q8ck0aaaaa" } request.get(url,cookies ...

  6. ABAP 省市县级联搜索帮助

    在展示ABAP代码之前,先建立自建表ZCHENH006,表中包含两个关键字段 BELNR(地区编码),SDESC(地区描述). 编码规则参考:身份证前六位地区编码规则,可参考我另外一篇Blog导入系统 ...

  7. docker镜像加速器

    目前国内比较靠谱的镜像加速器网址:https://www.daocloud.io/mirror

  8. linux安装rabbitmq3.6.5

    一.准备依赖包 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c++ k ...

  9. php json 写入 mysql 的例子

    $a['aaa']='aaaa'; $a['bbb']='bbb'; $a['ccc']='ccc'; $arr['step_name']='kfkf'; $arr['process_name']=' ...

  10. DBHelper类

    import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import ja ...