[微精通:網頁設計Vue + Node.js + MySQL] 3.5. <input> & <select>

到了本小節,可以說是一個實際的完整範例,若你能了解此範例,恭喜你,你學會了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" > &times; </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" > &times; </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>