迴圈指令v-for
阿新 • • 發佈：2020-09-10
<!--一句話總結
vue中迴圈指令v-for可以迴圈陣列（v-for="item in list"）、迴圈物件（v-for="(val,key) in obj"）、迴圈數字（v-for="count in 10"）
1、v-for迴圈陣列：<p v-for="item in list">{{item}}</p>
2、v-for迴圈物件：<p v-for="(val,key) in obj">val：{{val}}---key：{{key}}</p>
3、v-for迴圈數字：<p v-for="count in 10">{{count}}</p>
-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>迴圈指令v-for</title> </head> <body> <div id="app"> <!--v-for遍歷普通陣列--> <!--<p v-for="item in list">{{item}}</p>--> <!--不僅想遍歷陣列的值，還想便利陣列的索引--> <!--<p v-for="(item,index) in list">索引為{{index}},值為{{item}}</p>--> <!--遍歷陣列物件--> <!--<p v-for="item in obj">name為{{item.name}},age為{{item.age}}</p>--> <!--遍歷物件--> <!--<p v-for="(value,key) in role">{{key}}:{{value}}</p>--> <!--遍歷數字--> <p v-for="item in 10">{{item}}</p> </div> </body> <script src="../JS/Vue.js"></script> <script> new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6], obj: [ {name: '由比濱結衣', age: 17}, {name: '雪之下雪乃', age: 17}, {name: '一色彩羽', age: 16}, {name: '川崎沙希', age: 18}, {name: '雪之下陽乃', age: 22}, ], role: {name: '由比濱結衣', age: 17, すき: 'hotpink'}, }, }) </script> </html>