在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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
Vue.js添加组件操作示例
Jun 13 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
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
竞选演讲稿范文大全
2014/05/12 职场文书
食品安全承诺书范文
2014/08/29 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
Python基础之数据结构详解
2021/04/28 Python
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
nginx lua 操作 mysql
2022/05/15 Servers