vue v-model 绑定表单元素的数据 （1）基础用法

用法：

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。

尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。 

---

 #文本 <input> 元素

例子详解：

VUE 部分：新建vue实例，创建并绑定父元素 #div。创建数据属性 text 并设置初始值 null

var vm = new Vue({
          el:"#div",
          data:{ text:null }
})

HTML 部分:  用 v-model 绑定数据属性 text。{{ text }} 就是输入框的内容（数据）

<div id="div">
<input v-model="text" placeholder="please enter the text" >
<p>here is the text: {{text}} </p>
</div> 

<div id="div">
<input v-model="text" placeholder="please enter the text" >
<p>here is the text:{{text}}</p>
</div>

<script>
var vm = new Vue({
          el:"#div",
          data:{text:null}
})

</script>

网页显示效果

扫描二维码关注公众号，回复： 3440380 查看本文章

---

# 多行文本 <textarea>

<div id="div">
<textarea v-model="text" placeholder="please enter the text" >在这里写文字会显示吗？-不会显示</textarea>

<p>here is the text:{{text}}</p>
</div>

在HTML 的<textarea> （在这里的文字不被显示）</textarea> 元素中间的内容不会被显示

---

# 复选框 <input type="checkbox">

单个复选框绑定的是布尔值；

多个复选框绑定的是数组

<div id="div">
<input type="checkbox" id="checkbox" v-model="text" />
<label for="checkbox">单个复选框</label>

<p>这里显示数据属性text 的值（布尔值）:<span id="important">{{text}}</span></p>
</div>


<script>
var vm = new Vue({
          el:"#div",
          data:{text:null}
})

（单选复选框）例子说明：

用v-model="text" 绑定了text 的数据属性。 单个复选框被选中时，text 的值为 true；不被选中时，text 值为 false

<div id="div">
<input type="checkbox" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
<input type="checkbox" id="b"v-model="text"  value="banana"/>
<label for="b">香蕉</label>
<input type="checkbox" id="c" v-model="text"  value="watermelon"/>
<label for="c">西瓜</label>

<p>这里显示数据属性 text 的值<br />
（原是空数组[ ]，被放入被选中的多选框的value的值）:<span id="important">{{text}}</span></p>
</div>

<script>
var vm = new Vue({
		el:"#div",
		data:{text:[]}
})

</script>

 （多选复选框）例子说明：

text 初始值为 空数组 [ ]。选中复选框时，被选中的复选框元素<input > 的 value 值被传入这个数组中

1. 数据属性 text 的初始值是 [ ] 空数组。

var vm = new Vue({
        el:"#div",
        data:{ text:[ ] }
})

2. 当选中复选框时，{{ text }} 的值是被选中的复选框元素的 value的值（比如说 香蕉 这个<input> 元素设置了value 值是"banana"。当选中这个复选框时，"banana" 这个值被传入了 数据属性 {{text }} 中 ）

 <input type="checkbox" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>

---

#单选按钮 <input type="radio">

<div id="div">
<input type="radio" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
<input type="radio" id="b"v-model="text"  value="banana"/>
<label for="b">香蕉</label>
<input type="radio" id="c" v-model="text"  value="watermelon"/>
<label for="c">西瓜</label>

<p>这里显示数据属性 text 的值<br />
（原是空值，被传入被选中的单选按钮的value的值）:<span id="important">{{text}}</span></p>
</div>

<script>
var vm = new Vue({
		el:"#div",
		data:{text:""}
})
</script>

<input type="radio" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>

选中单选按钮时，{{ text }} 的值是被选中的单选按钮元素的 value 的值 "apple"

---

 # 选择框 <select> （单选和多选）

<div id="div">
<select v-model="text">
<option >apple</option>
<option>banana</option>
<option>watermelon</option>
</select>

<p>这里显示数据属性 text 的值<br />
（原是空值，被传入被选中的&lt;option&gt; 元素的value值）:<span id="important">{{text}}</span>
<br/>
<br/>注意：&lt;option&gt;元素没有设置vaule值时，传入的是这个元素中间的文本 
</p>
</div>

<script>
var vm = new Vue({
		el:"#div",
		data:{text:""}
})

</script>

1. 单选<select> 

注意：

2.多选 <select multiple> 

 <div id="div">
<select multiple v-model="text"> 
<option >apple</option>
<option>banana</option>
<option>watermelon</option>
</select>

---

3. v-for 动态渲染  多选 <select multiple>

<div id="div">
<select v-model="selectedVal" >
<option v-for="option in options">{{option.value}}</option>
</select>

<p>这里显示数据属性 text 的值<br />
（原是空数组，被传入被选中的&lt;option&gt; 元素的value值）:<span id="important">{{selectedVal}}</span>
<br/>
</p>
</div>

<script>
var vm = new Vue({
		el:"#div",
		data:{
		    selectedVal:"",
		    options:[
	            {num:"a",value:"apple"},
		        {num:"b",value:"banana"},
		        {num:"c",value:"cherry"}
		             ]
			  }
})

</script>

例子解析：

1. 因为for 有遍历循环的作用，所以可以利用 v-for 遍历获取 数据属性option 数组元素

<option v-for="option in options" v-bind:value="option.value"> {{option.value}} </option>

这里显示的是<opiton> {{option.value}} </opiton>的值。

2. 选中banana时，{{selected}} 的值也改变为 "banana" 。

因为<select> 元素绑定了 <select v-model="selectedVal" >。selectedVal 数据属性初始值为空。

当选项选定banana时，select 元素的 value 值就是 "banana"。selectedVal 因为双向绑定，值也变成了"banana"

问题： 为什么既要用 v-bind:value="option.value" 绑定<opiton>元素，还要写 <opiton> {{option.value}} </opiton>？

回答：

情况一：不写<opiton> {{option.value}} </opiton>

<select v-model="selectedVal" >
<option v-for="option in options" v-bind:value="option.value"></option>
</select>

var op=document.getElementsByTagName("option");
alert("option元素的value值是："+op[0].value+","+op[1].value+","+op[2].value)

1. 下拉列表不显示任何值。 

2. 但是可以检测到 option 的value 值

---

情况二：不绑定v-bind:value="option.value"

<select v-model="selectedVal" >
<option v-for="option in options" >{{option.value}}</option>
</select>

1. 下拉列表显示了option 的数据属性值。2. 同时可以检测到option的value 值