在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 相关文章推荐
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
全面解析bootstrap格子布局
May 22 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
jquery replace方法去空格
May 08 jQuery
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
Vue接口封装的完整步骤记录
May 14 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
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
简单的js计算器实现
2016/10/26 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
食品安全检查制度
2014/02/03 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
运动会跳远加油稿
2014/02/20 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
酒店厨房管理制度
2015/08/06 职场文书
五年级语文教学反思
2016/03/03 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
python图像处理 PIL Image操作实例
2022/04/09 Python