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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
Dojo 学习要点
Sep 03 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
基于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
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
javascript实现留言板功能
2020/02/08 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
python抓取网页内容示例分享
2014/02/24 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python字典一键多值实例代码分享
2019/06/14 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python机器学习实现决策树
2019/11/11 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
骨干教师考核方案
2014/05/09 职场文书
验房委托书
2014/08/30 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
小学同学聚会感言
2015/07/30 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书