Vue列表渲染(基礎篇)
阿新 • • 發佈：2022-03-06
複習一下前端知識條件渲染知識點
v-for in xxx 等價於 v-for of xxx
廢話不多說，操作很簡單，該文件作為自己簡單筆記使用，大神勿噴！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"> <!-- 遍歷陣列物件 --> <ul> <li v-for="(item,index) in person" :key="item.id">{{item.age}}--{{item.name}}</li> </ul> <!-- 遍歷物件 --> <ul> <li v-for="(value,key) in car">{{value}} -- {{key}}</li> </ul> <!-- 遍歷字串 --> <p v-for="(value,index) in hello" :key="index">{{value}} -- {{index + 1}}</p> <!-- 指定遍歷次數 --> <p v-for="(value,index) of 5">{{value}} -- {{index + 1}}</p> </div> </body> <script src="../VueJs/vue.js"> </script> <script> new Vue({ el: "#root", data: { person: [ { 'id': 001, 'name': '張三', 'age': 20 }, { 'id': 002, 'name': '李四', 'age': 25 }, { 'id': 003, 'name': '王五', 'age': 22 } ], car: { 'name': '賓士E級', 'price': 400000, }, hello: "你真是個漂亮的小姑娘呀!" } }) </script> </html>
三更燈火五更雞，正是男兒讀書時!