在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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
jquery 常用操作方法
Jan 28 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
限制复选框的最大可选数
2006/07/01 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
python简单验证码识别的实现方法
2019/05/10 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
详解Python yaml模块
2020/09/23 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
中科方德软件测试面试题
2016/04/21 面试题
干部培训自我鉴定
2014/01/22 职场文书
财务会计自荐信范文
2014/02/21 职场文书
房产代理公证处委托书
2014/04/04 职场文书
演讲稿格式范文
2014/05/19 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python