参考

基础用法

可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，?但v-model本质上不过是语法糖?!。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。?你应该通过JavaScript在组件的data选项中声明初始值?!。

对于需要使用输入法（如中文、日文、韩文等）的语言，你会发现v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。

文本

<div id="app-67">
	<input v-model="msg" placeholder="edit me"/>
	<p>Message is: {{ msg }}</p>
</div>

new Vue({
	el: '#app-67',
	data: {
		msg: ''
	}
})

在文本区域插值（<textarea></textarea>）并不会生效，应用v-model来代替。

复选框

单个复选框，绑定到布尔值：

<div id="app-69">
	<input type="checkbox" id="checkbox" v-model="checked"/>
	<label for="checkbox">{{ checked }}</label>
</div>

var app69 = new Vue({
	el: '#app-69',
	data: {
		checked: false
	}
})

多个复选框，绑定到同一个数组：

<div id="app-70">
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"/>
	<label for="jack">Jack</label>
	<input type="checkbox" id="john" value="John" v-model="checkedNames"/>
	<label for="john">John</label>
	<input type="checkbox" id="mike" value="Mike" v-model="checkedNames"/>
	<label for="mike">Mike</label>
	<br/>
	<span>Checked names: {{ checkedNames }}</span>
</div>

var app70 = new Vue({
	el: '#app-70',
	data: {
		checkedNames: []
	}
})

注意：如果v-model指令用在复选框上，并且指定一个非数组对象，那么这个对象将被存储这个复选框是否已经被选择的boolean值，如果指定一个数组对象，那么这个对象将被存储这个已经被选择的复选框的value值。

Jack
John
Mike
Checked names: {{ checkedNames }}

单选按钮

<div id="app-72">
	<input type="radio" id="one" value="One" v-model="picked"/>
	<label for="one">One</label>
	<br/>
	<input type="radio" id="two" value="Two" v-model="picked"/>
	<label for="two">Two</label>
	<br/>
	<span>Picked: {{ picked }}</span>
</div>

var app72 = new Vue({
	el: '#app-72',
	data: {
		picked: ''
	}
})

这组radio并没有加name属性进行分组，但是Vue.js会自动将这两个radio关联在一起。

选择框

<div id="app-73">
	<select v-model="selected">
		<option disabled value="">请选择</option>
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	<span>Selected: {{ selected }}</span>
</div>

var app73 = new Vue({
	el: '#app-73',
	data: {
		selected: ''
	}
})

如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项。因为这样的情况下，iOS不会触发change事件。因此更推荐像上面这样提供一个值为空的禁用选项。

<div id="app-74">
	<select v-model="selected" multiple style="width: 50px;">
		<option>A</option>
		<option>B</option>
		<option>C</option>
	</select>
	<br/>
	<span>Selected: {{ selected }}</span>
</div>

var app74 = new Vue({
	el: '#app-74',
	data: {
		selected: ''
	}
})

用v-for渲染的动态选项：

<div id="app-75">
	<select v-model="selected">
		<option v-for="option in options" v-bind:value="option.value">
			{{ option.text }}
		</option>
	</select>
	<span>Selected: {{ selected }}</span>
</div>

var app75 = new Vue({
	el: '#app-75',
	data: {
		selected: 'A',
		options: [
			{
				text: 'One',
				value: 'A'
			},
			{
				text: 'Two',
				value: 'B'
			},
			{
				text: 'Three',
				value: 'C'
			}
		]
	}
})

值绑定

对于单选按钮，复选框以及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）：

<div id="app-76">
	<!-- 当选中时,'picked'为字符串"a" -->
	<input type="radio" v-model="picked" value="a"/>
	<input type="radio" v-model="picked" value="b"/>
	<span>{{ picked }}</span>
	<!-- 'toggle'为true或false -->
	<input type="checkbox" v-model="toggle"/>
	<span>{{ toggle }}</span>
	<!-- 当选中第一个选项时·，'selected'为字符串'abc' -->
	<select v-model="selected">
		<option value="abc">ABC</option>
		<option value="def">DEF</option>
	</select>
	<span>{{ selected }}</span>
</div>

var app76 = new Vue({
	el: '#app-76',
	data: {
		picked: '',
		toggle: false,
		selected: []
	}
})

但是有时我们可能想把值绑定到Vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。

复选框

<div id="app-77">
	<input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/>
	<p>toggle: {{ toggle }}</p>
</div>

var app77 = new Vue({
	el: '#app-77',
	data: {
		toggle: ''
	}
})

这里的true-value和false-value特性并不会影响输入控件的value特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，（比如“yes”或“no”），请换用单选按钮。

单选按钮

??!

<div id="app-78">
	<input type="radio" name="radioGroup1" v-model="picked" v-bind:value="a"/>
	<input type="radio" name="radioGroup1" v-model="picked" v-bind:value="b"/>
	<p>{{ picked }}</p>
</div>

var app78 = new Vue({
	el: '#app-78',
	data: {
		picked: false,
		a: 'test',
		b: 'test2'
	}
})

// 当选中时
vm.picked === vm.a

解析

<input type="radio" name="radioGroup1" v-model="picked" v-bind:value="a"/>

v-model='picked'表示如果单选按钮被选中，会将单选按钮value属性的值赋值到picked变量上。而单选按钮的value属性的值与变量a绑定在了一起，所以单选按钮的value属性值就是变量a的值。所以，如果单选按钮如果被选择，则变量a的值就会赋值到picked上，因此，如果这个单选按钮如果被选择，则picked与a这两个变量将相等。

选择框的选项

<div id="app-79">
	<select v-model="selected">
		<option v-bind:value="{ number: 123 }">123</option>
		<option v-bind:value="1234">1234</option>
	</select>
	{{ selected }}
</div>

var app79 = new Vue({
	el: '#app-79',
	data: {
		selected: ''
	}
})

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

在默认情况下，v-model在每次input事件（即改变input的内容就立即响应，光标没有离开）触发后将输入框的值与数据进行同步（除了上述输入法组合文字时）。你可以添加lazy修饰符，从而转变为使用change事件（当光标离开控件时）进行同步：

<div id="app-80">
	<!-- 在“change”时而非“input”时更新 -->
	<input v-model.lazy="msg">
	<input v-model="msg">
	<p>Msg: {{ msg }}
</div>

var app80 = new Vue({
	el: '#app-80',
	data: {
		msg: ''
	}
})

.number

如果想自动将用户输入的值转为数值类型，可以给v-model添加number修饰符：

<div id="app-81">
	<input v-model.number="age" type="number"/>
	{{ age }}
</div>

var app81 = new Vue({
	el: '#app-81',
	data: {
		age: '0'
	}
})

这通常很有用，因为即使在type='number'时，HTML输入元素的值也总会返回字符串。

.trim

如果要需要过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符：

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

在组件上使用v-model

如果你还不熟悉Vue的组件，可以暂且跳过这里。

HTML原生的输入元素类型并不总能满足需求。幸好，Vue的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和v-model一起使用！要了解更多，请参阅组件指南中的自定义输入组件。

转载请注明：叉烧店 » 表单输入绑定