vue表单选项框

选项框选的内容在下面显示
 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 }}  ，&nbsp;选择性别：{{ gender }}</span>
87     </div>
88 
89 
90 </body>
91 </html>
猜你喜欢
