Vue.js 笔记05

发布于 2020-05-26  571 次阅读


关键词:表单、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

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

届ける言葉を今は育ててる
最后更新于 2020-05-26