选项框选的内容在下面显示
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 var app = 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>