陈自瑶资料,中文之家,文晓艳
首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果。
以下为完整代码,很简单,但也是个技巧。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>title</title> <style> .on { background: red; border: 1px solid blue; } .off { background: yellow; border: 1px solid black; } </style> </head> <body> <div id="app"> <ul> <!--利用v-for中的index值,绑定样式来实现隔行变色效果--> <li v-for="(name,index) in names" :class="{on:index%2==0,off:index%2!=0}">{{name}}</li> </ul> </div> <script src="./vue.dev.js"></script> <script> var vm = new vue({ el: "#app", data: { names: ['000', '111', '222', '333', '444', '555'] } }); </script> </body> </html>
总结
以上所述是小编给大家介绍的vue.js 利用v-for中的index值实现隔行变色,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论