Vue中提供了很方便的綁定方式，可以將輸入框輸入的值和數(shù)據(jù)對(duì)象中的屬性值進(jìn)行綁定。

<div id="app">
<input type="text" v-model="message">
<p>{{ message }}</p>
 </div>
var app = new Vue({
el: '#app',
data: {
message: ''
}
 })

上述代碼中，v-model指令和message屬性綁定在一起，輸入框中的值和message屬性值保持同步，即輸入框輸入的內(nèi)容會(huì)實(shí)時(shí)更新到message屬性中。而{{ message }}則用來(lái)顯示message屬性的值。

除了文本框，v-model指令還可以用在checkbox、radio、select等表單元素上，具體用法見(jiàn)下：

<div id="app">
<input type="checkbox" v-model="isChecked">
<p>{{ isChecked }}</p>
<input type="radio" name="gender" value="male" v-model="selectedGender"><label>Male</label>
<input type="radio" name="gender" value="female" v-model="selectedGender"><label>Female</label>
<p>{{ selectedGender }}</p>
<select v-model="selectedCity">
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Guangzhou">Guangzhou</option>
</select>
<p>{{ selectedCity }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
isChecked: false,
selectedGender: '',
selectedCity: ''
}
})

上述代碼中，v-model指令分別綁定了復(fù)選框的isChecked屬性，單選框的selectedGender屬性，以及下拉框的selectedCity屬性。這樣就可以輕松獲取用戶輸入的值了。