[微精通：網頁設計Vue + Node.js + MySQL] 3.5. <input> & <select> 張貼者： 羅康鴻 日期： 10月 13, 2021 取得連結 Facebook Twitter Pinterest 以電子郵件傳送 其他應用程式 到了本小節，可以說是一個實際的完整範例，若你能了解此範例，恭喜你，你學會了1/3業界所需的技能。 image/svg+xml<meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > </head> <body> <div id = 'app' > <span> Message is: {{ message }} </span> <br> < input type = " text " v-model = " message " > <hr> <span> Multiline message is: </span> <p> {{ multilineMessage }} </p> <br> < textarea v-model = " multilineMessage " ></ textarea > <hr> < input type = " checkbox " id = "checkbox" v-model = “ checked " > <label> {{ checked }} </label> <hr> < input type = " checkbox " value = " 瘋狂傑克 " v-model = " checkedNames " > <label> Jack </label> < input type = " checkbox " value = " 懶懶瑪琍 " v-model = " checkedNames " > <label> John </label> < input type = " checkbox " value = " ⼤提姆 " v-model = " checkedNames " > <label> Mike </label> <br> <span> Checked names: {{ checkedNames }} </span> <hr> < input type = " radio " value = "One" v-model = " picked " > <label> ⼀隻 </label> <br> < input type = " radio " value = "Two" v-model = " picked " > <label> ⼆隻 </label> <br> <span> Picked: {{ picked }} </span> <hr> < select v-model = " selected " > < option selected value = "Jack" > 瘋狂傑克 </option> < option value = "Mary" > 懶懶瑪琍 </option> < option value = "Tim" > ⼤提姆 </option> < /select > <span> Selected: {{ selected }} </span> <hr> </div> </body> <script> new Vue({ el: '#app' , data : { message : null , multilineMessage : "" , checked : false , checkedNames : [], picked : "One" , selected : "Jack" } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > </head> <body> <div id = 'app' > <ul> < li v-for = ' (zombie, index) in zombies ' > < p > {{ zombie.name }} , {{ zombie.age }} 歲 , {{ zombie.isVegetarian == true ? ‘ 素食者 ':' 非素食者 ' }} < /p > < img v-bind : src = ' zombie.typeImgSrc ' style = 'width:130px' > <hr> < /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> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > < script src = “ https://code.jquery.com/jquery-3.5.1.slim.min.js " > < /script > < script src = " https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/ bootstrap.bundle.min.js " >< /script > </head> <body> <div id = 'app' > < button type = "button" class = "btn btn-primary m-4" v-on:click = " showModal ()" > 新增 < /button > < div class = " modal fade" id = “ newModal " > < div class = “ modal-dialog " > < div class = “ modal-content " > < div class = “ modal-header " > < h5 class = " modal-title " > 新增殭屍 < /h5 > < button type = "button" class = "close" data-dismiss = " modal " > <span aria-hidden = "true" > × </span> < /button > < /div > < div class = “ modal-body " > < form style = "margin:20px;" > <label> 名字 </label> < input type = "textbox" class = “form-control" > <label> 變異年份 </label> < input type = "textbox" class = “form-control" > < input type = "checkbox" > <label class = "form-check-label" > 是否為素食者 </label> <br> <label> 類型圖片 </label> <div class = "form-check form-check-inline" > < input class = "form-check-input" type = "radio" > <label class = "form-check-label" > 選項 1 </label> </div> < /form > < /div > < div class = " modal-footer " > < button class = "btn btn-primary" v-on:click = " hideModal() " > 關閉 < /button > < /div > < /div > < /div > < /div > < /div > </body> <script> new Vue({ el: '#app' , data: { }, methods: { showModal : function () { $( '#newModal' ) . modal( "show" ) ; } , hideModal : function () { $( '#newModal' ) . modal( "hide" ) ; } } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > < script src = “https://code.jquery.com/jquery-3.5.1.slim.min.js" > < /script > <script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/ bootstrap.bundle.min.js" >< /script > </head> <body> <div id = 'app' > < button type = "button" class = "btn btn-primary m-4" v-on:click = " newInit ()" > 新增 < /button > < div class = " modal fade" id = " newModal " > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > <h5 class = "modal-title" > 新增殭屍 </h5> <button type = "button" class = "close" data-dismiss = "modal" > <span aria-hidden = "true" > × </span> </button> </div> < div class = " modal-body " > <form style = "margin:20px;" > <label> 名字 </label> < input type = "textbox" class = "form-control" v-model = “ newName " > <label> 變異年份 </label> < input type = "textbox" class = "form-control" v-model = “ newAge " > < input type = "checkbox" v-model = “ newIsVegetarian " > <label class = “form-check-label" > 是否為素食者 </label> <br> <label> 類型圖片 </label> < div class = "form-check form-check-inline" v-for = " x in imgTypes ” > < input class = "form-check-input" type = "radio" v-model = " newTypeImgSrc " v-bind:value = " x.src " > < label class = “form-check-label" > {{ x.name }} < /label > < /div > < img v-bind:src = ' newTypeImgSrc ' style = 'width:130px' > </form> < /div > < div class = " modal-footer " > < button class = "btn btn-primary" v-on:click = “ add() " > 加入 < /button > < /div > < /div > < /div > < /div > <hr> <ul> <li v-for = '(zombie, index) in zombies' > <p> {{zombie.name}}, {{zombie.age}} 歲 , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} </p> <img v-bind:src = 'zombie.typeImgSrc' style = 'width:130px' > <hr> </li> </ul> </div> </body> <script> new Vue({ el: '#app' , data : { imgTypes : [ {name: 'z1' , src: 'z1.png' }, {name: 'z2' , src: 'z2.png' }, {name: 'z3' , src: 'z3.png' }, {name: 'z4' , src: 'z4.png' }, {name: 'z5' , src: 'z5.png' } ] , 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" } ], newName : "" , newAge : 0 , newIsVegetarian : false , newTypeImgSrc : "z1.png" , } , methods: { newInit : function () { this .newName = "" ; this .newAge = 0 ; this .newIsVegetarian = false ; this .newTypeImgSrc = "z1.png" ; $( '#newModal' ).modal( "show" ); } , add : function () { if ( this .alertnewName.trim () == "" ){ alert( " 請輸入名字。 " ); return ; } let age = parseFloat ( this .newAge ); if ( isNaN(age) == true ){ alert( " 變異年份請輸入數值。 " ); return ; } this .zombies.push ( { name: this .newName, age: age, isVegetarian: this .newIsVegetarian, typeImgSrc: this .newTypeImgSrc } ) ; $('#newModal') . modal( "hide" ) ; } } }); </script> </html> 2 更多的 <input> 與 <select> 應⽤ 1. <input> 標籤 type 為 text ，⼀般的輸入⽅塊，加上個 v-model 同步資料⾄ message 屬性中。 2. <textarea> 標籤可讓使⽤者輸入多⾏的資料，加上個 v-model 同步資料⾄ multilineMessage 屬性中。最後在使⽤雙⼤括號 ({{}}) 同步顯⽰在畫⾯上。 3. <input> 標籤 type 為 checkbox ，這會產⽣⼀個勾選的輸入框，只會有勾選 true 與未勾選 false 兩個值，加上個 v-model 同步資料⾄ checked 屬性中。最後在 使⽤雙⼤括號 ({{}}) 同步顯⽰在畫⾯上。 4. 若有多個 type 為 checkbox 的 <input> 都⽤ v-model 將 資料同步⾄ checkedNames 屬性，這時候會將勾選的項⽬上 value 屬性的值都同步⾄ checkedNames 屬性對應的陣列中。 5. <input> 標籤 type 為 radio 則會產⽣出圓型選取的控制項， 這時若 v-model ⼜是設定為同⼀個屬性，如： picked ，則這時它 們會有互斥單項的效果，選擇其中⼀個，則另⼀個會取消選取。 6. <select> 標籤是⼀個下拉式的控制項，會搭配 <option> 標籤使⽤， <option> 則是⽤來表⽰下拉式 控制項中的項⽬。 7. 在 <select> 標籤上使⽤ v-model 同步⾄ selected 屬性中，在 選取時會將被選取項⽬的 value 屬性值同步⾄ selected 屬性中。 8. 當然，剛才使⽤ v-model 同步 的屬性，都存在於 data 屬性中。 w3_5_1 - home.html 1 2 3 4 5 6 1 2 3 4 5 6 9. 執⾏後的畫⾯可以操作看 看，在觀察 v-model 如何同步每 個不同類型的 <input> 與 <select> 。 完善殭屍管理功能 - 顯⽰ w3_5_2 - home.html 1. 使⽤ v-for 依序的將 zombies 屬性中陣 列的殭屍物件依序轉換成 <li>DOM 元素。 2. 注意， v-for 的另⼀個版本是可回傳 2 個 值，⼀個是⽬前的殭屍物件，⼀個是索引位 置，在此分別放入 zombie 與 index 變數中。 3. 使⽤雙⼤括號 ({{}}) 輸出殭 屍的姓名 name 、變異年分 age ， 並將是否為素食者 isVegetarian 透過三元運算轉 為 ’ 素食者 ' 與 ' 非素食者顯⽰。 ' 4. 使⽤ v-bind 將存放圖片檔的 typeImgSrc 屬性的值綁定在 <img> 標籤的 src 屬性上。 5. 到此，我們完成了顯⽰殭屍的功能。 1. 加入 jQeury 套件與 bootstrap 程式套件，加入的 ⽬的是為了使⽤ bootstrap 中額外的進階功能。 8. 若沒問題則加入⾄ zombies 屬性的陣列中，此 時 Vue 會依 zombies 屬性重新產⽣出新的 <li>DOM 元素，新的殭屍資訊也就出現了。 1. 接下 ’ 新增 ’ 按鈕執⾏ newInit() ⽅法，對 newName 、 newAge 、 newIsVegetarian 與 newTypeImgSrc 屬性設定初始值。並透過 $(‘newModal').modal('show') 顯⽰新增殭屍的 modal 。 1 1 理解 bootstrap 的 modal 對話框 w3_5_3 - home.html 2. 使⽤ bootstrap 的 modal 製作新增畫⾯新增按鈕按下時會顯⽰ id 為 newModal 的畫⾯。 bootstrap 的 modal 由 modal 類別中有 modal- dialog 類別、 modal-dialog 類別⼜以 modal-header 、 modal- body 與 modal-footer 類別組成，我們會在其中放入相應的內容。 3. 按下時會先執⾏ showModal() 顯⽰的 modal 。其中的 $(‘newModal’) 即透過 jQuery 套件找到 id 為 newModal 的 DOM 元 素，並呼叫 modal(‘show') ⽅法顯⽰ bootstrap 中的 modal 。 2. 使⽤ v-model 將名字、變異 年份、是否為素食者與類型圖片 同步回 newName 、 newAge 、 newIsVegetarian 與 newTypeImgSrc 中。 3. 類型圖片的選項使⽤ v-for 依序依 imgTypes 屬性中陣列產⽣選項。每 個 <input> 的值透過 v- bind:value 綁定為 src 屬性，被選取後透過 v- model 同步⾄ newTypeImgSrc 屬性。 4. 在此使⽤ <img> 標籤，透過 v- bind:src=‘newTypeImgSrc' 即 時顯⽰選取的圖片。 5. 按下加入按鈕時會執⾏ add() ⽅法進⾏加入新殭屍的程序。 4. 接著是 modal-dialog ，其中 有 modal-content ⽤以存放整個 modal 的內容。 5. 這是 modal 的表頭 header ， 6. 其中的 modal-title 放在 <h5> 標籤中，並放入 ’ 新增殭屍 ' 的字樣作為標題。 7. 在 header 中放入⼀個關閉按鈕，顯⽰的⽂字⽤ <span> 將起來， ’×’ 是個 ’x' 的符號，因為在 <button> 上 加上 data-dismiss="modal" 的原因，因此在按下這按鈕 時會將所在的 modal(id 為 newModal) 關閉。 8. 接著是 modal-body ，存放 modal 的主要內容。 9. 在此我們使 ⽤先前先到的 <form> 排列出我 們等會要新增殭 屍⽤的表單，有 名字、變異年 份、是否為素食 者與類型圖片等 資訊。 10. 最後是 modal- footer 腳尾的地⽅放⼀個 <button> 關閉鈕。 10. 最後是 modal-footer 腳尾的地⽅放⼀個 <button> 關閉鈕。其中的 $(‘newModal’) 即透過 jQuery 套件找到 id 為 newModal 的 DOM 元素，並呼叫 modal(‘hide’) ⽅法隱 欌 bootstrap 中的 modal 。 11. 點選 ’ 開啟 ' 顯 ⽰這個 modal 。 12. 按下 ’ 關閉 ' 可關閉 modal 。 4 1 2 3 1 3 2 4 完善殭屍管理功能 - 新增 w3_5_4 - home.html 7. 加入 add() ⽅法，會先檢查名字與變異年份是否輸入正確，名字是 否有輸入、變異年份是否為數值。其中 newAge 屬性會試著透過 parseFloat() 函式轉為有⼩數的數值，並⽤ isNaN() 函式判斷是否 為數值，若驗證不過，則會進入 if 使⽤ alert() 顯⽰訊息，然後 return 回去中⽌後續的執⾏。 9. 最後關閉新增畫⾯。 10. 按下 ' 新增 ' 。 11. 填入 ’ ⼤隻佬 ' 的相關訊息。 12. 按下 ’ 加入 ' 。 13. 你會發現 ’ ⼤隻佬 ’ 會被加入到最下⽅。 1 2 1 3.5. <input> & <select> image/svg+xml<meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" ></ script> <script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/ bootstrap.bundle.min.js" ></script> </head> <body> <div id = 'app' > <!-- 略過⼀些 html —> < div class = " modal fade" id = " modifyModal " > <div class = "modal-dialog" > <div class = "modal-content" > <div class = "modal-header" > <h5 class = "modal-title" > 修改殭屍 </h5> <button type = "button" class = "close" data-dismiss = "modal" > <span aria-hidden = "true" > × </span> </button> </div> <div class = "modal-body" > <form style = "margin:20px;" > <div class = "form-group" > <label> 名字 </label> <input type = "textbox" class = "form-control" v-model = " modifyName " > </div> <div class = "form-group" > <label> 變異年份 </label> <input type = "textbox" class = "form-control" v-model = " modifyAge " > </div> <div class = "form-check form-group" > <input type = "checkbox" class = "form-check-input" v-model = " modifyIsVegetarian " > <label class = “form-check-label" > 是否為素食者 </label> </div> <div class = "form-group" > <label> 類型圖片 </label> <div class = "form-check form-check-inline" v-for = "x in imgTypes" > <input class = "form-check-input" type = "radio" v-model = " modifyTypeImgSrc " v-bind:value = "x.src" > <label class = “form-check-label" > {{x.name}} </label> </div> <img v-bind:src = 'modifyTypeImgSrc' style = 'width:130px' > </div> </form> </div> <div class = "modal-footer" > < button class = "btn btn-primary" v-on:click = “ update ()" > 更新 < /button > </div> </div> </div> < /div > <hr> <ul> < li v-for = '( zombie , index) in zombies ' > < p > {{zombie.name}}, {{zombie.age}} 歲 , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} < button class = "btn btn-primary" v-on:click = ‘ modifyInit ( zombie )' > 修改 < /button > < /p > <img v-bind:src = 'zombie.typeImgSrc' style = 'width:130px' > <hr> < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data: { imgTypes:[ {name: 'z1' , src: 'z1.png' }, {name: 'z2' , src: 'z2.png' }, {name: 'z3' , src: 'z3.png' }, {name: 'z4' , src: 'z4.png' }, {name: 'z5' , src: 'z5.png' } ], 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" } ], // 略過⼀些程式 modifyZombie : null , modifyName : "" , modifyAge : 0 , modifyIsVegetarian : false , modifyTypeImgSrc : "z1.png" }, methods: { // 略過⼀些程式 modifyInit : function ( x ) { this .modifyZombie = x ; this .modifyName = x . name ; this .modifyAge = x . age ; this .modifyIsVegetarian = x .isVegetarian; this .modifyTypeImgSrc = x.typeImgSrc; $( '#modifyModal' ) . modal( "show" ) ; } , update : function () { if ( this .alertnewName.trim () == "" ){ alert( " 請輸入名字。 " ); return ; } let age = parseFloat ( this .newAge ); if ( isNaN(age) == true ){ alert( " 變異年份請輸入數值。 " ); return ; } this .modifyZombie . name = this .modifyName ; this .modifyZombie . age = age ; this .modifyZombie . isVegetarian = this .modifyIsVegetarian ; this .modifyZombie . typeImgSrc = this .modifyTypeImgSrc ; $( '#modifyModal' ) . modal( "hide" ) ; } } }); </script> </html> <meta charset = "utf-8" > <html> <head> <script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue.min.js" ></script> <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css" > <script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" ></ script> <script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/ bootstrap.bundle.min.js" ></script> </head> <body> <div id = 'app' > <!-- 略過⼀些 html —> <ul> < li v-for = '( zombie , index ) in zombies ' > <p> {{zombie.name}}, {{zombie.age}} 歲 , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} <button class = "btn btn-primary" v-on:click = ‘modifyInit(zombie)' > 修改 </button> < button class = "btn btn-danger ml-1" v-on:click = “ del ( index )" > 刪除 < /button > </p> <img v-bind:src = 'zombie.typeImgSrc' style = 'width:130px' > <hr> < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data: { imgTypes:[ {name: 'z1' , src: 'z1.png' }, {name: 'z2' , src: 'z2.png' }, {name: 'z3' , src: 'z3.png' }, {name: 'z4' , src: 'z4.png' }, {name: 'z5' , src: 'z5.png' } ], 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" } ], // 略過⼀些程式 }, methods: { // 略過⼀些程式 , del : function ( i ) { this .zombies . splice ( i , 1 ); } } }); </script> </html> 1 1 1 完善殭屍管理功能 - 修改 1. 修改殭屍的 modifyModal 與新增的 newModal 很像。 w3_5_5 - home.html 2. 不同的是 v- model 的對象分 別是 modifyName 、 modifyAge 、 modifyIsVege tarian 與 modifyTypeIm gSrc 。 3. 在每個殭屍 <li> 中的 <p> 中加入修改按鈕，修改的按鈕 按下時會從 v-for 中的 zombie 變數取得⽬前的殭屍物件並以 參數值的⽅式帶入 modifyInit() ⽅法中，這樣 就可以將⽬前的殭屍物件傳入 以利後續存取。 5. 顯⽰修改畫⾯。 6. 最後是修改完資料的更新按鈕， 其會執⾏ update() ⽅法。 4. ⽬前的殭屍物件會傳入 x 參 數， modifyInit() ⽅法會將 殭屍物件存在 modifyZombie 變數中，然後將名字、變異年 份、是否為素食者與類型圖片放 入 modifyZombie 、 modifyName 、 modifyAge 、 modifyIsVegetarian 與 modifyTypeImgSrc 中，因 v- model 的關係在修改畫⾯上就 會看到⽬前殭屍的資訊。 7. 與新增殭屍進⾏同樣的名字 name 與變異年份 age 的 檢查，不符合同樣使⽤ alert() 顯⽰訊息，並使⽤ return 中斷後續程式的執⾏。 8. 檢查沒問題則同步回當時暫存在 modifyZombie 屬 性中的殭屍物件，因為是同⼀個殭屍物件，這個修改的 資訊也會同步回畫⾯上的 <li>DOM 元素。 9. 最後，關閉修改畫⾯。 10. 選擇 ’ 瘋狂傑克 ' 按下 ' 修改 ' 。 11. modifyInit() ⽅法 會帶入此殭屍的資訊。 12. 修改資料為此圖。 13. 按下 ’ 更新 ' 。 14. 瘋狂傑克的資料將被更 新後顯⽰在畫⾯上。 1 2 2 2 完善殭屍管理功能 - 刪除 w3_5_6 - home.html 1. 注意，使⽤ v-for 的接收 2 個 值，⼀個是⽬前的殭屍物件，⼀個是 索引位置，在此分別放入 zombie 與 index 變數中。 2. 在 ’ 修改 ' 按鈕後⾯加入 ' 刪除 ' 按鈕， 按下時會傳入⽬前的索引位置 index 變數 中的值⾄ del() ⽅法中使⽤。 3. 刪除 del() ⽅法會使⽤ splice() ⽅法移除 i 參數中帶入的索引位置，這 位置即是要刪除的殭屍物件的位置。 splice(i,1) 表⽰陣列中刪除 i 位置的 1 個值。 4. 當然，在移除後 Vue 會重新產⽣ <li>DOM 元素，這個被刪除的殭屍資料 也就不會在產⽣ <li>DOM 元素。 5. 按下 ’ 瘋狂傑克 ' 的刪除鈕進⾏刪除。 6. 刪除後，殭屍列表中就 不再有 ’ 瘋狂傑克 ' 了。 1 1 留言
留言
張貼留言