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


Posted in Javascript onMarch 03, 2018

(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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
js转义字符介绍
Nov 05 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 #Javascript
JS表单传值和URL编码转换
Mar 03 #Javascript
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
vue中实现移动端的scroll滚动方法
Mar 03 #Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 #Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 #Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python新手学习标准库模块命名
2020/05/29 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
工程业务员工作职责
2013/12/07 职场文书
给民警的表扬信
2014/01/08 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
如何写好建议书
2014/03/13 职场文书
2014年施工员工作总结
2014/11/18 职场文书
婚礼新人答谢词
2015/01/04 职场文书
小学作文之描写天气
2019/08/15 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
nginx请求限制配置方法
2021/07/09 Servers