在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的闭包
Dec 31 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 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使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP多进程编程实例详解
2017/07/19 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
json数据的列循环示例
2013/09/06 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
2016/06/01 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS删除数组里的某个元素方法
2018/02/03 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
express 项目分层实践详解
2018/12/10 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
Python中endswith()函数的基本使用
2015/04/07 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
期末自我鉴定
2014/02/02 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
搞笑老公保证书
2015/02/26 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
MySQL普通表如何转换成分区表
2022/05/30 MySQL