1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-model</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 <script> 8 window.onload= () =>{new Vue({ 9 el: '#group', 10 data: { 11 checked:false, 12 users:[], 13 selected:'', 14 msg:'' 15 } 16 }) 17 18 } 19 </script> 20 21 </head> 22 <body> 23 24 <div id="group" align="left"> 25 <h4>简单的问卷表格</h4> 26 27 <!--单选框--> 28 <div id="checkbox"> 29 是否想要学习该门课程：<input type="checkbox" v-model="checked">{{checked}} 30 </div> 31 <!--多选框--> 32 请选择你需要的老师：<br/> 33 34 <div id="multi checkbox"> 35 <input type="checkbox" value="lucy" v-model="users"/>lucy<br/> 36 <input type="checkbox" value="cidy" v-model="users"/>cidy<br/> 37 <input type="checkbox" value="bob" v-model="users"/>bob<br/> 38 <br/> 39 选中的老师：{{users}} 40 </div> 41 <!--下拉列表--> 42 请选择你想学习的课程：<br/> 43 <div id="select"> 44 <select v-model="selected"> 45 <option disabled="disabled" value="">--请选择--</option> 46 <option>java</option> 47 <option>c++</option> 48 <option>c#</option> 49 <option>php</option> 50 <option>html</option> 51 52 </select><br/> 53 <span>已选择：{{selected}}</span> 54 </div><br/> 55 <!--文本框--> 56 <p>请输入其它备注文本内容:</p> 57 <div id="textarea"> 58 <textarea v-model="msg"></textarea> 59 60 61 62 </div> 63 64 </div> 65 66 67 </body> 68 </html> 69 </html>