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 相关文章推荐
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
图解js图片轮播效果
2015/12/20 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python实现kmp算法的实例代码
2019/04/03 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python实现同一局域网下传输图片
2020/03/20 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
销售文员的岗位职责
2013/11/20 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
班级活动策划书
2014/02/06 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server