[微精通:網頁設計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 4. 當然, z1.png~z5.png 的圖片也確實存在於與 home.html 同⼀個⽬錄,但確無法呈現。 殭屍類型的圖片,如何依照資料綁字在 <img> W3_3_2 - home.html 1. ⾸先,為了版⾯好看,我們使將殭屍的資訊⽤ <p> 裝成來形成⼀個段落。 3. 重點來了,我們希望將資料中的 typeImgSrc 屬性的資料放 <img> src 屬性上,這時可以使⽤ ’v-bind:' 指令,綁定 每個殭屍物件的 typeImgSrc 屬性的值到 src 屬性上,即 z1.png~z5.png 4. 在等號 (=) 後⾯直接寫上要綁定的資料,其來⾃於 zombie 變數中的每個殭屍資料上的 typeImgSrc 屬性。 2. 為了不要讓圖片太⼤,簡單使⽤ style 屬設定圖片的寬度為 130px 像素。 5. 透過 v-bind: 指令的綁定,成 功將每個殭屍物件的 typeImgSrc 屬性的值綁定在 <img>DOM 元素的 src 屬性上以正確的顯⽰出顯片。 1 1 只想顯⽰ ' 非素食者 ' 的殭屍,怎麼做到 ? W3_3_3 - home.html 1 1. v-for 會依照 zombies 屬性中的陣列,依序的產⽣ <li>DOM 元素以顯⽰每個殭屍的資訊。 2. 但若以想顯⽰ ' 非素食者 ' isVegetarian false 的殭屍,這時要怎麼辦好呢 ? v-if 指令, 依是否為素食者決定是否 ' 輸出 ' 顯⽰特殊資訊的 DOM 元素 W3_3_4 - home.html 1 1. v-for ⼀樣依照 zombies 屬性中的陣列,依序的產 ⽣出 <li>DOM 元素以顯⽰每個殭屍的資訊。 2. <li> 上使⽤ v-if 指令, v-if 會依條件決定是否 產⽣並輸出這個 <li>DOM 元素。 3. zombie 變數同樣來⾃於 v-for ,使⽤這個變數取得其 中的殭屍資料,判斷殭屍的是否為素食者 isVegetarian 屬性決定是否產⽣輸出這個 <li>DOM 元素。 document html head ul li body link script li meta 4. 當然,因為不產⽣ <li>DOM 元素的原 因,因此只會產⽣ isVegetarian false 的兩個殭屍物件的 <li>DOM 元素, 並顯⽰在畫⾯上。 1 v-show 指令, 依是否為素食者決定是否 ' 隱藏 ' 顯⽰特殊資訊的 DOM 元素 W3_3_5 - home.html 1 1 document html head ul li body link script li meta 2. v-show v-if 不同的是,它⼀定 產⽣並輸出 <li>DOM 元素,只是它會 透過設定 CSS ”display:none” 將這個 <li>DOM 元素隱藏,雖然最後 的畫⾯是與 v-if 相同的。 1. v-for ⼀樣依照 zombies 屬性中的陣列,依序的產 ⽣出 <li>DOM 元素以顯⽰每個殭屍的資訊。 li li li style=display:none style=display:none style=display:none 為何使⽤ v-show? 有的時候你希望有這個 DOM 元素存在,存在的⽬的可能是 其他的程式需要去讀取操作它,它只是隱藏,但它存在,因此讀取其中的資訊 時是會存在的。

留言