v-for迭代，以及瀏覽器通過瀏覽器新增資料
阿新 • • 發佈：2018-12-10
v-for完成迭代後，持續控制瀏覽器的頁面，為非同步操作提供可能。
直接載入的頁面：
通過瀏覽器除錯工具，新增如圖程式碼，回車即可完成：
注意:新增物件時候有時不知道什麼原因，就是不能正確執行程式碼，可以在自己的整合開發環境中，直接拷貝同類物件，修改即可。
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> </head> <body> <div id="app"> <ul> <li v-for="food in foodList">{{food.kind}} 原價：￥{{food.price}} 現價：￥{{food.price*food.discount}}</li> </ul> </div> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
JS：
var app = new Vue({ el:'#app', //作用到id為app物件上 data:{ foodList:['蔥，姜，蒜'], foodList:[ { kind:'蔥', price:5, discount:0.8 }, { kind:'姜', price:8, discount:0.8 }, { kind:'蒜', price:4, discount:1 } ] //同樣的名字陣列後面的會覆蓋前面的陣列，並不會報錯 } });