版权声明:出处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. 一个简单SpringBoot例子

    一:为什么使用springBoot: 有利于开发(整合框架,例如整合了springMVC,Mybatis等框架); 启动无需配置tomcat(java应用程序运行,实际以jar包运行),内置tomca ...

  2. vim相关

    保存和传递宏 1 先建立一个宏.如上 2 在任意一个文件的空白位置normal状态下,命令"ap 即可以把宏的内容显示出来.比如说我的宏是: "ohello th id<80 ...

  3. Python实践练习:强口令检测

    题目: 写一个函数,它使用正则表达式,确保传入的口令字符串是强口令.强口令的定义是:长度不少于 8 个字符,同时包含大写和小写字符,至少有一位数字.你可能需要用多个正则表达式来测试该字符串,以保证它的 ...

  4. logback的使用和logback.xml详解,在Spring项目中使用log打印日志

    logback的使用和logback.xml详解 一.logback的介绍 Logback是由log4j创始人设计的另一个开源日志组件,官方网站: http://logback.qos.ch.它当前分 ...

  5. C#中EXCEL表格的内容进度条实现

    public void ExportToExcel() { DataTable dt = getDataTable(); if (dt == null) { MessageBox.Show(" ...

  6. mezzanine的page_menu tag(二)

    dict的特性,key可以是None >>> def f(): a=[2,3] return a #函数返回local变量 >>> a=f() >>&g ...

  7. Apache Struts2高危漏洞(S2-057CVE-2018-11776)

    花了两天时间,特此记录 一:背景: 2018年8月22日,Apache Strust2发布最新安全公告,Apache Struts2存在远程代码执行的高危漏洞. 二:漏洞产生原理: 1.需要知道对应跳 ...

  8. Android Studio--按钮跳转新页

    MainActivity.xml: <Button android:id="@+id/btnGo" android:layout_width="wrap_conte ...

  9. setting设置

    1.调试 DEBUG = True 2.设置template TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTem ...

  10. python入门(一):进入python的交互模式、pip的使用和数据类型

    环境安装: https://www.python.org/ pycharm 社区版路径: http://www.jetbrains.com/pycharm/download/download-than ...