我們可以使用 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