v-model指令实现简单的问卷表格

 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>