表單雙向繫結：

1. 繫結的資料能更新表單的值
2. 表單的值能更新所繫結的資料

• 通過v-model指令來實現雙向繫結
• v-model——監聽使用者的輸入事件來更新資料

規則：

• 初始化——v-model 會忽略所有表單元素的初始值而總是將 Vue 例項的資料data作為資料來源。
• 關聯事件—v-model 在內部為不同的輸入元素使用不同的 屬性並丟擲不同的事件

注意事項：

• 在文字區域插值 (<textarea>{{text}}</textarea>) 並不會生效，應用 v-model 來代替。
• 單個複選框checkbox可以繫結布林值，自定義字串型別；多個複選框可以繫結到陣列
• 單選按鈕radio可以繫結字串
• 選擇框select單選時繫結到字串,設定多選multiple時可繫結到陣列

例項：

<div id="app">
			<!-- input text型別，當行文字-->
			<input v-model.trim="message" type="text" />
			<p>Message is：{{message}}saa</p>
			<!-- input textarea型別，當行文字 -->
			<textarea v-model="message2" cols="24" rows="4"></textarea>
			<p>Message2 is：{{message2}}</p>
			<!-- 複選框，繫結陣列型別-->
			<input type="checkbox" id="jack" value="jack" v-model="team" />
			<label for="jack">Jack</label>
			<input type="checkbox" id="Mark" value="Mark" v-model="team" />
			<label for="Mark">Mark</label>
			<input type="checkbox" id="Rondo" value="Rondo" v-model="team" />
			<label for="Rondo">Rondo</label>
			<input type="checkbox" id="Lucian" value="Lucian" v-model="team" />
			<label for="Lucian">Lucian</label>
			<p for="team">Now Team:{{team}}</p>
			<!-- 複選框也可以繫結bool值，只需要資料在data裡宣告bool型別-->
			<input type="checkbox" id="redis" value = "mmm" v-model="tech" />
			<p for="team2">Now Tech:{{tech}}</p>
			<!-- 複選框的值繫結也可以自定義，下面就定義了選中和沒選中的兩種值-->
			<input
			  type="checkbox"
			  v-model="toggle"
			  true-value="yes"
			  false-value="no"
			>
			<p for="toggle">Now toggle:{{toggle}}</p>
			<!-- 單選框 -->
			<input type="radio" id="man" value="男" v-model="sex" />
			<label for="man">男</label>
			<input type="radio" id="woman" value="女" v-model="sex" />
			<label for="woman">女</label>
			<p for="person">Now Sex:{{sex}}</p>
			<!-- 下拉框 -->
			<!-- 單選 -->
			<select name="" id="" v-model="answer">
				<option disabled value="">請選擇</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<p for="answer">Now Answer:{{answer}}</p>
			<!-- 多選 -->
			<div id="example-6">
			  <select v-model="selected" multiple style="width: 50px;">
			    <option>A</option>
			    <option>B</option>
			    <option>C</option>
			  </select>
			  <br>
			  <span>Now multiple Answer: {{ selected }}</span>
			</div>
			<!-- 使用v-for建立select -->
			<select v-model="todayfruit">
				<option v-for="item in fruit" v-bind:value ="item.val">{{item.text}}</option>
			</select>
			<p>Fruit Now:{{todayfruit}}</p>
		</div>
 

javascript:

		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					message:"赤紅之瞳",
					message2:"靈之風息",
					team:[],
					tech:false,
					toggle:"",
					sex:"",
					answer:"",
                    selected:[],
					fruit:[
						{text:"香蕉",val:"banana"},
						{text:"蘋果",val:"apple"},
						{text:"橘子",val:"orange"}
					],
					todayfruit:""
				}
			});
		</script>
 

結果：

修飾符

.lazy

在預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 (除了上述輸入法組合文字時)。你可以新增 lazy 修飾符，從而轉為在 change 事件_之後_進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg">

.number

如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符：

<input v-model.number="age" type="number">

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

.trim

如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符：

<input v-model.trim="msg">