表单绑定的基本用法
作者：互联网
下面的代码实现的有：单行文本、多行文本、复选框（checkbox）、单选按钮（radio）、选择框（selected）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script src="vue.js" type="text/javascript" charset="utf-8"></script>
7 </head>
8 <body>
9 <div id="app">
10 <input v-model="message" placeholder="edit me">
11 <p>Message : {{message}}</p>
12
13 <textarea v-model="message2"placeholder="multiple lines">
14 </textarea>
15 <p>Message2 : {{message2}}</p>
16
17 <!-- 多个复选框，绑定到同一个数组 -->
18 <input type="checkbox" id="jack" value="Jack" v-model="checkName">
19 <label for="jack">Jack</label>
20 <input type="checkbox" id="john" value="John" v-model="checkName">
21 <label for="john">John</label>
22 <input type="checkbox" id="mike" value="Mike" v-model="checkName">
23 <label for="mike">Mike</label>
24 <p>复选按钮 : {{checkName}}</p>
25
26 <input type="radio" id="one" value="One" v-model="picked">
27 <label for="one">One</label>
28 <input type="radio" id="two" value="Two" v-model="picked">
29 <label for="two">Two</label>
30 <input type="radio" id="three" value="Three" v-model="picked">
31 <label for="three">three</label>
32 <p>单选按钮 : {{ picked }}</p>
33
34 <!-- 单个复选框，绑定到布尔值 -->
35 <input type="checkbox" id="checkbox" v-model="checked">
36 <label for="checkbox"> {{ checked }}</label>
37 <br>
38 <br>
39
40 <select v-model="selected">
41 <option value="">请选择</option>
42 <option>A</option>
43 <option>B</option>
44 <option>C</option>
45 </select>
46 <span>Selected: {{ selected }}</span>
47 <br>
48 <br>
49
50 <select v-model="selecteds" multiple style="width: 50px;">
51 <option>A</option>
52 <option>B</option>
53 <option>C</option>
54 </select>
55 <br>
56 <span>Selecteds: {{ selecteds }}</span>
57 </div>
58 <script type="text/javascript">
59 var example2 = new Vue({
60 el: '#app',
61 data:{
62 message:"hello",
63 message2:"duohang",
64 checkName:['Jack'],
65 picked:'',
66 checked:false,//这里是布尔值，即使初始化不是布尔值也会转换为布尔值
67 selected:'',
68 selecteds:['A']
69 },
70 })
71 </script>
72 <style type="text/css">
73
74 </style>
75 </body>
76 </html>
多选时的选择框是不是有问题？还是只能选择一个。
以上代码大部分来自官方文档https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95
以及一个博客：https://blog.csdn.net/qq_35713752/article/details/78542787
标签：绑定,布尔值,selected,E7%,用法,单选,picked,按钮,表单 来源： https://www.cnblogs.com/yizhiran/p/12250737.html