vue2_列表渲染、資料監視
阿新 • • 發佈：2022-04-03
1列表渲染
1.1、基本列表
v-for指令
-
用於展示列表資料
-
語法：
<li v-for="(item,index) in items " :key="index">,這裡 key 可以是 index ,更好是遍歷的物件的唯一標識。 -
可遍歷：陣列、物件、字串（用的少）、指定次數（用的少）
<!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>初始vue</title> <!-- 引入vue--> <script src="/vueBaseJs/vue.js"></script> </head> <body> <div id="root"> <!-- 遍歷陣列--> <h2>人員列表</h2> <ul> <li v-for="(p,index) in personList" :key="p.id"> {{p.name}} _ {{p.age}} </li> </ul> <!-- 遍歷物件--> <h2>車配置列表</h2> <ul> <li v-for="(val,k) of car" ::key="k"> {{k}} ： {{val}} </li> </ul> <!-- 遍歷字串 --> <!-- <h2>遍歷字串</h2> <ul> <li v-for="(char,index) of str" ::key="index"> {{index}} _ {{char}} </li> </ul> --> <!-- 遍歷次數 --> <!-- <h2>遍歷次數</h2> <ul> <li v-for="(number,index) in 5 " ::key="index"> {{number}} _ {{index}} </li> </ul> --> </div> <script> Vue.config.productionTip=false;//阻止vue啟動時生成生產提示 const vm=new Vue({ el:"#root", data:function(){ return { personList:[ {id:001,name:"張三",age:18}, {id:002,name:"李四",age:19}, {id:003,name:"王五",age:20} ], car:{ name:"奧迪rs7", price:"150w", color:"黑色" }, str:"Hello World!" } }, }); </script> </body> </html>
結果：