首先定义好样式，利用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值，来实现隔行变色
原文地址：https://www.cnblogs.com/mycognos/p/9398360.html