在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 Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
详解js前端代码异常监控
Jan 11 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
简单实现js浮动框
2016/12/13 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vue实现按钮切换图片
2021/01/20 Vue.js
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python的subprocess模块总结
2014/11/07 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
机器学习python实战之决策树
2017/11/01 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
什么是python的id函数
2020/06/11 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
工作建议书范文
2014/05/13 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
2015年公务员工作总结
2015/04/24 职场文书
企业安全生产规章制度
2015/08/06 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
react中的DOM操作实现
2021/06/30 Javascript