在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 脚本的加载与执行
Apr 19 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
javascript填充默认头像方法
Feb 22 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python输入二维数组方法
2018/04/13 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Python3爬楼梯算法示例
2019/03/04 Python
python3.7 的新特性详解
2019/07/25 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
文明教师事迹材料
2014/01/16 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
学校德育工作总结2015
2015/05/11 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL
win7配置本地ftp服务器的图文教程
2022/08/05 Servers