Vue.js 笔记05

关键词：表单、v-model及其修饰符

基本用法

表单控件在实际业务中较为常见，例如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上：

<div id="app">
	<input type="text" v-model="message" placeholder="输入..." />
	<p>输入的内容是：{{message}}</p>
</div>

以上述例子为例，在输入框输入的同时，{{message}}也会实时将内容渲染到视图中。
使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时value的属性。

单选按钮

单选按钮可直接用v-bind绑定checked属性来决定是否勾选，在多个同组单按钮中，可用v-model配合value实现互斥的效果。

<div id="app">
	<input type="radio" value="js" v-model="picked"/>js从入门到入土 <br/>
	<input type="radio" value="html" v-model="picked"/>html从入门到入土<br/>
	<input type="radio" value="css" v-model="picked"/>css从入门到入土<br/>
	{{picked}}
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			picked:'js'
		}
	})
</script>

多选按钮（复选框）

复选框内容与单选框相似，单独使用时用v-model绑定一个布尔值即可决定是否勾选，组合使用时v-model与value搭配使用即可，此时v-model绑定的是一个数组。

选择列表

使用<select>标签，当需要多选列表时，给<select>标签添加multiple属性即可
例如:

<div id="app">
	<select v-model="selected">
		<option>html</option>
		<option value="js">javascript</option>
		<option>css</option>
	</select>
	<select v-model="selected2" multiple>
		<option>html</option>
		<option value="js">javascript</option>
		<option>css</option>
	</select>
</div>

多选列表中用v-model绑定的将是一个数组，和复选框类似
当option项有写明value时，会优先匹配value的值，否则会以option的text作为value进行匹配。
在业务中，<option>常用v-for动态输出，value和text也是用v-bind来动态输出的，例如：

<div id="app">
	<select v-model="selected">
		<option v-for="option in options" :value="option.value">
			{{option.text}}
		</option>
	</select>
	选择的项是： {{selected}}
</div>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			selected:'html',
			options:[
				{text:'HTML',value:'html'},
				{text:'JavaScript',value:'js'},
				{text:'CSS',value:'css'}
			]
		}
	})
</script>

修饰符

与事件修饰符相似，v-model也有修饰符，用于控制数据同步的时机

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy可以将其转变为在 change 事件中才同步，例如：

<div id="app">
	<input type="text" v-model.lazy="message" />
	{{message}}
</div>

这样，就只有在页面失焦或用户按下回车的情况下才会更新message数据

.number

该修饰符可以将输入转换为Number类型，否则输入一律作为String类型保存

<div id="app">
	<input type="text" v-model.number="message" />
	{{typeof message}}
</div>

.trim

该修饰符可以自动过滤输入的首尾空格