叉烧店并不卖叉烧

表单输入绑定

vuejs TTT 172℃ 0评论

参考

基础用法

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

v-model会忽略所有表单元素的valuecheckedselected特性的初始值而总是将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值。
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-valuefalse-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上,因此,如果这个单选按钮如果被选择,则pickeda这两个变量将相等。

选择框的选项

<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一起使用!要了解更多,请参阅组件指南中的自定义输入组件

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

喜欢 (1)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址