在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 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python中类型关系和继承关系实例详解
2015/05/25 Python
浅谈Python的异常处理
2016/06/19 Python
python调用c++传递数组的实例
2019/02/13 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
sklearn的predict_proba使用说明
2020/06/28 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
大学生实习证明范本
2014/01/15 职场文书
父母对孩子说的话
2014/04/12 职场文书
欢迎横幅标语
2014/06/17 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
德劲DE1108畅想
2021/04/22 无线电
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers