Vue.js 的一个小技巧---利用v-for中的index值，来实现隔行变色
Posted mycognos
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 的一个小技巧---利用v-for中的index值，来实现隔行变色相关的知识，希望对你有一定的参考价值。
首先定义好样式，利用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.js的一些小语法v-for,v-text,v-html,v-on:click
Vue.js - 如何按特定属性对数组中的对象进行排序并使用“v-for”进行渲染