v-for指令
作者：互联网
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head>
<body> <!-- v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 或 v-for="(p,index) of XXX" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） --> <div id="root"> <h2>遍历数组</h2> <div> <ul> <li v-for="(x,i) in persons" :key="x.id">[{{i}}] {{x.id}}-{{x.name}}-{{x.age}}</li> </ul> </div> <hr> <h2>遍历对象属性</h2> <div> <ul> <li v-for="(v,key,i) in car">[{{i}}] {{key}}-{{v}}</li> </ul> </div> <hr> <h2>遍历字符串</h2> <div> <ul> <li v-for="(v,i) in stringText">[{{i}}] {{v}}</li> </ul> </div> <hr> <h2>循环次数</h2> <div> <ul> <li v-for="(v,i) in 5">[{{i}}] {{v}}</li> </ul> </div> </div> <script> let vm = new Vue({ el: '#root', data: { persons: [{ id: 001, name: '张三', age: 20 }, { id: 002, name: '李四', age: 21 }, { id: 003, name: '王五', age: 22 }], car: { name: '奥迪A6', price: '32万', color: '黑色' }, stringText: 'Hello!' } }) </script> </body>
</html>
标签：el,遍历,name,age,指令,王五,id 来源： https://www.cnblogs.com/wohenxinwei/p/15981509.html