一、基本用法

你可以用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。

但 v-model 本質(zhì)上不過是語法糖。它負責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進行一些特殊處理。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值。

一組代碼，看完text、textarea、radio、checkbox、select的基本用法：

<div id="app7">  <input type="text" v-model="message"><label>{{message}}</label></br>  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>  <!--單選按鈕在單獨使用時,不需要v-model,直接使用v-bind 綁定一個布爾類型的值,為真時選中,為否時不選-->  <input type="radio" :checked="picked"><label>單選按鈕</label></br>  <!--如果是組合使用來實現(xiàn)互斥選擇的效果,就需要v-model 配合value來使用：-->  <input type="radio" v-model="sex" value="boy"><label>男</label>  <input type="radio" v-model="sex" value="girl"><label>女</label></br>  <!--復(fù)選框使用數(shù)組類型的數(shù)據(jù)匹配-->  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>  <!--單選時的選擇框,多選時加multiple屬性就可以了-->  <!--但我們一般都不用原生的這種下拉框，不美觀，擴展功能也不好，一般會用插件或自己封裝一個-->  <select v-model="select">   <option disabled value="">請選擇</option>   <option>html</option>   <option value="js">javascript</option>   <option>css</option>  </select>  <!--用 v-for 渲染的動態(tài)選項-->  <select v-model="selected">   <option v-for="option in options" :value="option.value">    {{option.text}}   </option>  </select> </div>var app7 = new Vue({ el: '#app7', data:{  message: '單行文本',  message1: '多行文本',  picked: true,  sex: 'boy',  hobby: ['爬山','滑雪'],  select: 'css',  selected: 'A',  options: [   { text: 'One', value: 'A' },   { text: 'Two', value: 'B' },   { text: 'Three', value: 'C' }  ] }});

二、值綁定

單選按鈕、復(fù)選框和選擇列表在單獨使用或單選的模式下， v-model 綁定的值是一個靜態(tài)字符串或布爾值， 但在業(yè)務(wù)中，有時需要綁定一個動態(tài)的數(shù)據(jù)， 這時可以用v-bind 來實現(xiàn)。

一組代碼，看完表單常用radio、checkbox、select的值綁定：