在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操作xml
Nov 04 Javascript
js清空form表单中的内容示例
May 20 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
js运动事件函数详解
Oct 21 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
Linux下python制作名片示例
2018/07/20 Python
python 制作网站小说下载器
2021/02/20 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
美德好少年主要事迹
2014/01/29 职场文书
工程建设实施方案
2014/03/14 职场文书
总经理助理的职责
2014/03/14 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
代办委托书怎么写
2014/08/01 职场文书
2014年行政工作总结
2014/11/19 职场文书
运动会宣传稿100字
2015/07/23 职场文书
小学大队长竞选稿
2015/11/20 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL