在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 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Vue实现简单的留言板
2020/10/23 Javascript
python实现合并两个数组的方法
2015/05/16 Python
pandas数值计算与排序方法
2018/04/12 Python
python实现括号匹配的思路详解
2018/08/23 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python常用运维脚本实例小结
2020/02/14 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
python高级特性简介
2020/08/13 Python
Python对excel的基本操作方法
2021/02/18 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
护士的岗位职责
2013/12/04 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
2016银行求职自荐信
2016/01/28 职场文书
银行求职信怎么写
2019/06/20 职场文书
redis限流的实际应用
2021/04/24 Redis
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android