用法：

可以用 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"

<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>
 

網頁顯示效果

# 多行文字 <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 值