在vue中给列表中的奇数行添加class的实现方法


Posted in Javascript onSeptember 05, 2018

---------笔记---------

实现效果:给列表中的奇数或偶数添加class

//奇数行
<ul>
 <li class="list-item" v-for="(item,index) in data" :class="{'active':index%2 != 1}">{{data[index].name}}</li>
</ul>

奇数行::class="{'active':index%2 != 1}"

偶数行::class="{'active':index%2 != 0}"

active是需要添加的class

以上这篇在vue中给列表中的奇数行添加class的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery弹出关闭遮罩层实例
Aug 06 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
vue component组件使用方法详解
Jul 14 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 #Javascript
浅谈vue 单文件探索
Sep 05 #Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 #Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
vue中动态添加class类名的方法
Sep 05 #Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 #Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 #Javascript
You might like
2.PHP入门
2006/10/09 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python3实现逐字输出的方法
2019/01/23 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
JSP&Servlet技术面试题
2015/05/21 面试题
物业管理应届生求职信
2013/10/28 职场文书
会计岗位职责
2013/11/08 职场文书
乔迁之喜主持词
2014/03/27 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
个性发展自我评价2015
2015/03/09 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js