表单绑定的基本用法

下面的代码实现的有:单行文本、多行文本、复选框(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">Jacklabel>
20       <input type="checkbox" id="john" value="John" v-model="checkName">
21       <label for="john">Johnlabel>
22       <input type="checkbox" id="mike" value="Mike" v-model="checkName">
23       <label for="mike">Mikelabel>
24     <p>复选按钮 : {{checkName}}p>
25     
26       <input type="radio" id="one" value="One" v-model="picked">
27       <label for="one">Onelabel>
28       <input type="radio" id="two" value="Two" v-model="picked">
29       <label for="two">Twolabel>
30      <input type="radio" id="three" value="Three" v-model="picked">
31      <label for="three">threelabel> 
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>Aoption>
43        <option>Boption>
44        <option>Coption>
45      select>
46      <span>Selected: {{ selected }}span>
47      <br>
48      <br>
49     
50      <select v-model="selecteds" multiple style="width: 50px;">
51          <option>Aoption>
52          <option>Boption>
53          <option>Coption>
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

 

你可能感兴趣的:(表单绑定的基本用法)