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>
浙公网安备 33010602011771号