[微精通：網頁設計Vue + Node.js + MySQL] 3.2. v-for

張貼者： 日期：
v-for，幫你重複輸出相同的html，如同程式中的JavaScript中的for一樣。

 

image/svg+xml3.2. v-for <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> <div id = 'app' > < ul > < /ul > </div> </body> <script> new Vue({ el: '#app' , data: { zombies : [ { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true , typeImgSrc: "z1.png" } , { name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true , typeImgSrc: "z2.png" } , { name: ' ⼤提姆 ' , age: 5 , isVegetarian: false , typeImgSrc: "z3.png" } , { name: ' 史提夫 ' , age: 2 , isVegetarian: false , typeImgSrc: "z4.png" } , { name: ' 功夫李 ' , age: 1 , isVegetarian: true , typeImgSrc: "z5.png" } , ] } }); </script> </html> <meta charset = "utf-8" > <html> <head> <link rel = 'stylesheet' href = 'zombie.css' > <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> </head> <body> <div id = 'app' > <ul> < li v-for = ' zombie in zombies ’ > {{ zombie .name }} , {{ zombie .age }} 歲 , {{ zombie .isVegetarian == true ? ‘ 素食者 ’:' 非素食者 ' }} < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data : { zombies : [ { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true } , { name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true } , { name: ' ⼤提姆 ' , age: 5 , isVegetarian: false } , { name: ' 史提夫 ' , age: 2 , isVegetarian: false } , { name: ' 功夫李 ' , age: 1 , isVegetarian: true } , ] } }); </script> </html> 多個殭屍資料怎麼⽤ Vue 顯⽰ ? 1. 在第⼆章 JS 中我們曾經使⽤ for 將陣列中的殭屍物 件依序的建立 <li>DOM 元素放在 <ul> 元素中，現在使 ⽤ Vue ⼜要如何做到 ? w3_2_1 - home.html v-for 指令，重複產⽣顯⽰殭屍資訊的 html w3_2_2 - home.html 1. ⾸先⼀同樣先定義好 <li> 標籤，並使⽤雙⼤ 括號輸出殭屍的資訊。 2. 然後加上 Vue 的 v-for 指令為的是依資料重複產⽣這個 <li>DOM 元素，注意，這在標籤中是個屬性沒錯，只是 Vue 將 這些⾃⾏創造的屬性稱為指令，好依指令執⾏⼀些動作。 3. v-for 會使⽤ data 屬性中的 zombies 屬性，它必須是⼀個陣列，接 著依序的從陣列中拿出每個殭屍資訊物 件⾄ zombie 中，每拿出⼀次就會產⽣ 出⼀個新的 <li>DOM 元素。 4. 這樣後雙⼤括號 ({{}}) 中的 zombie 就 有的殭屍資料的物件，在透過 zombie 取得 name 、 age 與 isVegetarian 屬性的值。 1 1 5. 這些殭屍資料，即是透濄 v-for 指令，將陣列中的 殭屍物件讀出，重複轉換成 <li>DOM 元素的結果。

留言

張貼留言