vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。
对象遍历
value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="value in me"；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> var demo = new Vue({ el:'#demo', data:{ object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <div v-for="(value, key,index) in object"> {{ index }} : {{ key }} : {{ value }} </div> </div> <script> var demo = new Vue({ el:'#demo', data:{ object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> </body> </html>
数组遍历
数组遍历和对象遍历相类似，最大的不同点在于对象的 “key” 和 “index” 是一致的，所以这里我们只需要取一个 index 即可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <ul> <li v-for="(item, index) in items" v-on:click="onclick(index)">{{index}}：{{item}}</li> </ul> </div> <script> var demo = new Vue({ el:'#demo', data:{ items: ['apple', 'tomato', 'banana', 'watermelon'] }, methods:{ onclick(index){ alert(index); } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <ul> <li v-for="todo in items"> {{ todo.message}} </li> </ul> <ul> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> </div> <script> var demo = new Vue({ el:'#demo', data:{ parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ], } }) </script> </body> </html>
