点击刷新
以下为完整代码，很简单，但也是个技巧。
<!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> <s编程客栈cript src="./vue.dev.jwww.cppcns.coms"></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.js 利用v-for中的index值实现隔行变色
本文地址: http://www.cppcns.com/wangluo/javascript/236184.html
© 著作权归作者所有
举报
发表评论
0/200
