vue學習---列表渲染(v-for)
阿新 • • 發佈：2021-11-14
v-for指令:
1.用於展示列表資料
2.語法：v-for="(item, index) in xxx" :key="yyy"
3.可遍歷：陣列、物件、字串（用的很少）、指定次數（用的很少）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本列表</title> <script type="text/javascript"src="../js/vue.js"></script> </head> <body> <!-- v-for指令: 1.用於展示列表資料 2.語法：v-for="(item, index) in xxx" :key="yyy" 3.可遍歷：陣列、物件、字串（用的很少）、指定次數（用的很少） --> <!--準備好一個容器--> <div id="root"> <!-- 遍歷陣列 --> <h2>人員列表（遍歷陣列）</h2> <ul> <li v-for="(p,index) of persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul><!-- 遍歷物件 --> <h2>汽車資訊（遍歷物件）</h2> <ul> <li v-for="(value,k) of car" :key="k"> {{k}}-{{value}} </li> </ul> <!-- 遍歷字串 --> <h2>測試遍歷字串（用得少）</h2> <ul> <li v-for="(char,index) of str" :key="index"> {{char}}-{{index}} </li> </ul> <!-- 遍歷指定次數 --> <h2>測試遍歷指定次數（用得少）</h2> <ul> <li v-for="(number,index) of 5" :key="index"> {{index}}-{{number}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'張三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], car:{ name:'奧迪A8', price:'70萬', color:'黑色' }, str:'hello' } }) </script> </html>