<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> </head> <body> <!--1.数组迭代--> <div id="example1"> <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> <!--第二个参数为索引--> <ul> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> </div> <!--2.对象迭代--> <div id="example2"> <!--第一个参数为属性值--> <ul> <li v-for="value in object"> {{ value }} </li> </ul> <!--第二个参数为键名--> <ul> <li v-for="(value, key) in object"> {{ key }}: {{ value }} </li> </ul> <!--第三个参数为索引--> <ul> <li v-for="(value, key, index) in object"> {{ index }}.{{ key }}: {{ value }} </li> </ul> </div> <!--3.在使用 v-for 时提供 key--> <!--2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的--> <div id="example3"> <ul> <li v-for="item in items" :key="item.id"> {{ item.message }} </li> </ul> </div> <script type="text/javascript" src="vue.min.js"></script> <script> let vm1 = new Vue({ el: '#example1', data: { parentMessage: 'Parent', items: [ {message: 'Foo'}, {message: 'Bar'} ] } }); let vm2 = new Vue({ el: '#example2', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }); let vm3 = new Vue({ el: '#example3', data: { items: [ { id: 1, message: 'Foo' }, { id: 2, message: 'Bar' } ] } }) </script> </body> </html>