在vue中给列表中的奇数行添加class的实现方法
更新时间：2018年09月05日 10:13:33 作者：西风XF
今天小编就为大家分享一篇在vue中给列表中的奇数行添加class的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
---------笔记---------
实现效果：给列表中的奇数或偶数添加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的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue实现动态列表尾部添加数据执行动画
- Antd-vue Table组件添加Click事件,实现点击某行数据教程
- vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
- 在vue中动态添加class类进行显示隐藏实例
- Vue实现textarea固定输入行数与添加下划线样式的思路详解
- VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
- VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
- vue+elementui实现点击table中的单元格触发事件--弹框
- vue elementUI table 自定义表头和行合并的实例代码
- vue+elementui实现动态添加行/可编辑的table
相关文章
Vue Router是Vue.js的官方路由器,它与Vue.js核心深度集成,使使用Vue.js构建单页应用程序变得轻而易举,下面这篇文章主要给大家介绍了关于Vue3实现路由跳转的相关资料,需要的朋友可以参考下2022-08-08
在以webpack为构建工具的开发环境中我们可以很方便的实现SVG图标的组件化,下面这篇文章主要给大家介绍了关于Vue3中级指南之如何在vite中使用svg图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
在vue项目中父子组件间的通讯很方便,但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦,这时使用eventBus通讯,就可以很便捷的解决这个问题,这篇文章主要给大家介绍了关于Vue中事件总线(eventBus)使用的相关资料,需要的朋友可以参考下2022-03-03
Vue路由回退的完美解决方案（vue-route-manager）
最近做了一个vue项目关于路由场景的问题,路由如何回退指定页面,在此做个记录,这篇文章主要给大家介绍了关于Vue路由回退的完美解决方案,主要利用的是vue-route-manager,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue路由传参及获取参数的方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
近期在做ve3的项目时因为功能需要,需要获取当前路由的地址,下面这篇文章主要给大家介绍了关于vue3获取当前路由地址的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区，需要的朋友可以参考下2019-04-04
vue3+elementPlus table中添加输入框并提交校验
这篇文章主要介绍了vue3+elementPlus table里添加输入框并提交校验,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue 导航菜单刷新状态不消失,显示对应的路由界面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本篇文章主要介绍了解读vue生成的文件目录结构及说明，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论