[微精通:網頁設計Vue + Node.js + MySQL] 3.3. v-bind & v-if & v-show

v-bind,讓你將資料輸出至DOM元素的屬性上,直接變更DOM元素的屬性值。而v-if與v-show,讓你讓條件顯示會隱藏DOM元素。

 

image/svg+xml3.3. v-bind & v-if & v-show <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 ? ' 素食者 ':' 非素食者 '}} < img src = ' zombie . typeImgSrc ' style = ' width:130px ' > < /li > </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 ' > < p > {{zombie.name}}, {{zombie.age}} , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} < /p > < img vbind:src = ' zombie . typeImgSrc ' style = 'width:130px' > < /li > </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 ' > <p> {{zombie.name}}, {{zombie.age}} , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} </p> <img vbind:src = 'zombie.typeImgSrc' style = 'width:130px' > < /li > </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 v-if = ' zombie.isVegetarian == false ' > <p> {{zombie.name}}, {{zombie.age}} , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} </p> <img vbind:src = 'zombie.typeImgSrc' style = 'width:130px' > < /li > </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 v-show = ' zombie.isVegetarian == false ' > <p> {{zombie.name}}, {{zombie.age}} , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} </p> <img vbind:src = 'zombie.typeImgSrc' style = 'width:130px' > < /li > </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> 殭屍類型的圖片,如何依照資料綁字在 <img> 1. 現在多了⼀個圖片 img 標籤,每個殭屍物件上也有 typeImgSrc 屬性存放著照片的檔名。 3. 但如何將 typeImgSrc 屬性中的值放在 src 屬性上呢 ? 直接寫 ’zombie.typeImgSrc' 然直接以 'zombie.typeImgSrc' 字串作為 src 屬性的值 ?! ⽽我們也確實沒有⼀ 'zombie.typeImgSrc' 的照片,最後 照片當然無法顯⽰出來,這該如何是好 ? W3_3_1 - home.html 1 1