v-for指令
阿新 • • 發佈：2022-03-08
<!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>