我們可以使用 Vue.js 中的 v-model 指令來完成表單數據的雙向綁定。
1 基礎用法
1.1 文本輸入框（text）
這里演示了在文本輸入框上輸入的內容，會實時映射到綁定的數據上。
html：
<div id="app"> <input type="text" v-model="content" placeholder="請輸入"> <p>輸入框：{{content}}</p></div>js：
<script> var app = new Vue({ el: '#app', data: { content: '' } });</script>效果：
1.2 大文本輸入框（textarea）
綁定方法與文本輸入框相同。
html：
<div id="app2"> <textarea v-model="content" placeholder="請輸入"></textarea> <p>內容：</p> <p style="white-space: pre">{{content}}</p></div>js：
var app2 = new Vue({ el: '#app2', data: { content: '' }});效果：
這里對展示的內容所對應的 <p> 元素加了 white-space: pre 樣式，這樣內容即使帶有回車符也會保留。
--------------------------------------------------------------------------------
注意：表單控件所顯示的值只依賴于所綁定的數據，所以即便設置了表單控件中的 value值，也不會起作用哦。同理，<textarea>xxx</textarea>之間的值也無效。
之前的示例我們可以發現，使用中文輸入法時，只有確定選中的詞語，才會被如果 Vue.js 所更新。如果希望輸入的內容實時更新，那么可以使用 @input。
html：
<div id="app3"> <textarea @input="inputHandler" placeholder="請輸入"></textarea> <p>內容：</p> <p style="white-space: pre">{{content}}</p></div>js：
var app3 = new Vue({ el: '#app3', data: { content: '' }, methods: { inputHandler: function (event) { this.content = event.target.value; } }});可以看出，即使在 @input 定義的函數不帶參數，Vue.js 也會在定義的函數（示例中的 inputHandler）中傳入 event 原生事件對象。
效果：
1.3 單選框
單選框一般都有多個條件可供選擇，既然是單選框，自然希望實現互斥效果，我們可以使用 v-model 指令配合單選框的 value 來實現。
html：
<div id="app4"> <input id="radio1" type="radio" v-model="checked" value="文學"> <label for="radio1">文學</label> <input id="radio2" type="radio" v-model="checked" value="藝術"> <label for="radio2">藝術</label> <input id="radio3" type="radio" v-model="checked" value="經濟"> <label for="radio3">經濟</label> <br> <p>選擇了：{{checked}}</p></div>js：
var app4 = new Vue({ el: '#app4', data: { checked: '文學' }});效果：
1.4 復選框
復選框的綁定方式與單選框相同，只不過復選框所對應的數據類型是數組罷了。
html：
<div id="app5"> <input id="checkbox1" type="checkbox" v-model="checked" value="文學"> <label for="checkbox1">文學</label> <input id="checkbox2" type="checkbox" v-model="checked" value="藝術"> <label for="checkbox2">藝術</label> <input id="checkbox3" type="checkbox" v-model="checked" value="經濟"> <label for="checkbox3">經濟</label> <br> <p>選擇了：{{checked}}</p></div>js：
var app5= new Vue({ el: '#app5', data: { checked: ['文學','藝術'] }});效果：
1.5 下拉選擇框
1.5.1 單選
html：
<div id="app6"> <select v-model="selected"> <option value="1">文學</option> <option value="2">藝術</option> <option>經濟</option> </select> <br> <p>選擇了：{{selected}}</p></div>js：
var app6 = new Vue({ el: '#app6', data: { selected: '1' }});效果：
可以看出，如果 <option> 含有 value 值，則會先匹配該值；如果沒有，則匹配 <option> 中的 text 值（比如示例中的 <option>經濟</option>）。
1.5.2 多選
為 <select> 標簽添加 multiple 屬性，即可實現多選。
html：
<div id="app7"> <select v-model="selected" multiple> <option value="1">文學</option> <option value="2">藝術</option> <option>經濟</option> </select> <br> <p>選擇了：{{selected}}</p></div>
在實際應用場景，<select> 標簽中的 <opinion> 一般是通過 v-for 指令動態輸出的，其中每一項的 value 或 text 都可以使用 v-bind 動態輸出的。
html：
<div id="app8"> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{option.text}} </option> </select> <br> <p>選擇了：{{selected}}</p></div>js：
var app8 = new Vue({ el: '#app8', data: { selected: '1', options: [ {text: '文學', value: '1'}, {text: '藝術', value: '2'} ] }});效果：
--------------------------------------------------------------------------------
因為 select 標簽的呈現樣式依賴于瀏覽器，所以在實際業務場景中，我們更多的是使用 div 來模擬 select 標簽的列表功能，而這可以通過使用 Vue.js 自定義組件的方式來實現一個通用的下拉選擇組件。
以上示例 DEMO
2 綁定動態變量
之前所說的示例，v-model 綁定的都是靜態變量。我們可以使用 v-bind 來綁定動態變量。
2.1 單選框
html：
<div id="app"> <input id="radio1" type="radio" v-model="picked" :value="value"> <label for="radio1">文學</label> <input id="radio2" type="radio" v-model="picked" :value="value2"> <label for="radio2">藝術</label> <input id="radio3" type="radio" v-model="picked" :value="value3"> <label for="radio3">經濟</label> <br> <p>{{picked}}</p> <p>{{value}},{{value2}},{{value3}}</p></div>js：
var app = new Vue({ el: '#app', data: { picked: false, value: '文學', value2: '藝術', value3: '經濟', }});效果：
示例中定義的單選框默認值為 picked 所定義的 false。當選中某個單選框時，則動態綁定在 :value 中定義的變量。
2.2 復選框
html：
<div id="app2"> <input id="checkbox" type="checkbox" v-model="checked" :true-value="value1" :false-value="value2"> <label for="checkbox">開關</label> <p>checked：{{checked}}</p> <p>value1：{{value1}}</p> <p>value2：{{value2}}</p></div>js：
var app2 = new Vue({ el: '#app2', data: { value1: '亮', value2: '暗', checked: '' }});效果：
復選框的默認值綁定的是 v-model 定義的變量，而勾選與取消勾選所綁定的值，則分別由 :true-value 與 false-value 來實現動態綁定。
2.3 下拉選擇框
html：
<div id="app3"> <select v-model="selected"> <option :value="{number:1}">文學</option> <option :value="{number:2}">藝術</option> </select> <br> <p>選擇了：{{selected.number}}</p></div>js：
var app3 = new Vue({ el: '#app3', data: { selected: '' }});效果：
當選中某個 option 時，app3.selected 為 Object，所以 selected.number 即為 :value 定義的綁定值。
以上示例 DEMO
新聞熱點
疑難解答
