v-for指令： 遍历列表； 尽量和 key 属性同时使用
效果图一：
效果图二：
代码：
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href=" "/> <style type="text/css"> * { margin: 0; padding: 0; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- v-for --> <div id="one"> <!-- 数组 i 为数组中的元素，index为该元素的索引 --> <li v-for="i,index in items">{{ index }}{{ i.message }}</li> <ol v-for="i,index in varry">{{ index }}{{ i }}</ol> <!-- 对象 value为对象中键值，key为对象中键名 --> <!-- v-bind:key="key" 的缩写形式 :key="key" --> <li v-for="value,key in person" :key="key">{{ key }} : {{ value }}</li> </div> <script type="text/javascript"> var vm = new Vue({ el: '#one', data: { items: [ {message: 'foo'}, {message: 'bar'} ], varry:[1,3,4,5], person: { name: '小猫咪', age: 22, sex: 'female' } } }) </script> </body> </html>