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 Array数组对象的扩展函数代码
May 22 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
JS实现简易留言板增删功能
Feb 08 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP实时显示输出
2008/10/02 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
用jquery来定位
2007/02/20 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
简单的js计算器实现
2016/10/26 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python算法应用实战之队列详解
2017/02/04 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
基于pandas中expand的作用详解
2019/12/17 Python
python实现图像全景拼接
2020/03/27 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
金鑫耀Java笔试题
2014/09/06 面试题
物流专业大学的自我评价
2014/01/11 职场文书
绩效工资分配方案
2014/01/18 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
学校消防安全责任书
2014/07/23 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
python垃圾回收机制原理分析
2022/04/13 Python