vue表單選項框
阿新 • • 發佈：2018-12-11
選項框選的內容在下面顯示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>vue表單的學習</title> 8<script src="./js/vue.js"></script> 9 <script> 10 //單一入口 11 window.onload = function(){ 12 var app = new Vue({ 13 14 el:"#a", 15 data:{ 16 message:'你好' 17 } 18 }); 19 // 多選框的增刪改查 20 varapp = new Vue({ 21 el:"#b", 22 data:{ 23 checknames:[] 24 } 25 }); 26 // 單選框 27 var app = new Vue({ 28 el:"#c", 29 data:{ 30 picked:"",gender:"男" 31 } 32 }); 33 }34 35 </script> 36 37 </head> 38 <body> 39 <div id = "a"> 40 <!-- 雙向繫結用 v-model繫結 --> 41 <input type='text' v-model='message'/> 42 43 設定的變數內容是: {{message}} 44 <!-- 多行文字域 textarea --> 45 <textarea v-model="message" style="height:300px"></textarea><br/> 46 47 <!-- 多選框的繫結 checkbox label是標籤屬性，來註明多選框的內容 --> 48 <input type='checkbox' name="crouse" value='mysql'/> 49 <label>mysql</label> 50 51 <input type="checkbox" name="crouse" value="jquery"/> 52 <label>jquery</label> 53 54 <input type="checkbox" name="crouse" value="vue"/> 55 <label>vue</label> 56 <br/><br/> 57 </div> 58 <!-- 多選框的繫結並顯示出來 --> 59 <div id="b"> 60 61 <!-- 多選框的繫結 checkbox label是標籤屬性，來註明多選框的內容 --> 62 <input type='checkbox' name="crouse" value='mysql' v-model="checknames" /> 63 <label>mysql</label> 64 65 <input type="checkbox" name="crouse" value="jquery" v-model="checknames"/> 66 <label>jquery</label> 67 68 <input type="checkbox" name="crouse" value="vue" v-model="checknames"/> 69 <label>vue</label> 70 <!-- 用vue的模板語法來列印勾選的課程列表 --> 71 {{ checknames }} <label>這是你所選的課程</label> 72 </div> 73 <br/><br/> 74 <!-- vue的單選標籤 --> 75 <div id="c"> 76 <!-- name 分組 --> 77 <input type="radio" name="yesorno" value="是" v-model="picked" /> 78 <label>是</label> 79 <input type="radio" name="yesorno" value="否" v-model="picked" /> 80 <label>否</label> 81 <input type="radio" name="nanornv" value="男" v-model="gender" /> 82 <label>男</label> 83 <input type="radio" name="nanornv" value="女" v-model="gender" /> 84 <label>女</label> 85 <br/> 86 <span>你選中的是：{{ picked }} ， 選擇性別：{{ gender }}</span> 87 </div> 88 89 90 </body> 91 </html>