【Vue全解8】Vue表单输入绑定v-model

目录

• 系列文章
• 基本用法
• 修饰符
• v-model
• 参考

一、系列文章

【Vue 全解 0】Vue 实例
【Vue 全解 1】构造选项 options 之 data
【Vue 全解 2】Vue 模板语法摘要
【Vue 全解 3】Vue 的 data 代理和数据响应式
【Vue 全解 4】options 之生命周期钩子（created、mounted、updated、destroyed）
【Vue 全解 5】options 之 DOM（el、template、render）
【Vue 全解 6】options 之资源（directive、filter、components）和修饰符
【Vue 全解 7】options 之组合（mixin、extends、provide/inject）
【Vue 全解 8】Vue 表单输入绑定 v-model

二、基本用法

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

1、 input代码示例(textarea也是一样的，只是标签不同而已)

<template>
	<div id='app'>
		<input v-model='message' />
		<p>message is:{{ message }}</p>
		<button v-on:click='message="frank"'>set message to frank</button>
	</div>
</template>
<scritp>
	export default {
		name:'App',
		data(){
			return {
				message:'',
			}
		}
	}
</script>

---

2、单个checkbox代码示例

<template>
	<div id='app'>
		<label>
			<input type='checkbox' v-model='x' />
			<span> x: {{x}}</span>
		</label>
	</div>
</template>
<scritp>
	export default {
		name:'App',
		data(){
			return {
				x:true,
			}
		}
	}
</script>

---

3、多个checkbox代码示例

<template>
	<div id='app'>
		爱好：{{x}}
		<hr/>
		/* 注意要存数字1时--> :value='1' */
		<label>
			<input type='checkbox' v-model='x' value='抽烟' />
			<span>抽烟</span>
		</label>
		<label>
			<input type='checkbox' v-model='x' value='喝酒'/>
			<span>喝酒</span>
		</label>
		<label>
			<input type='checkbox' v-model='x' value='烫头'/>
			<span>烫头</span>
		</label>
	</div>
</template>
<scritp>
	export default {
		name:'App',
		data(){
			return {
				x:[],
			}
		}
	}
</script>

---

4、单选按钮radio代码示例

<template>
	<div id='app'>
		你想要：{{x}}
		<hr/>
		/* 注意要存数字1时--> :value='1' */
		/* 加同一个name值表示为一组单选按钮 */
		<label>
			<input name='want' type='radio' v-model='x' value='抽烟' />
			<span>抽烟</span>
		</label>
		<label>
			<input name='want' type='radio' v-model='x' value='喝酒'/>
			<span>喝酒</span>
		</label>
		<label>
			<input name='want' type='radio' v-model='x' value='烫头'/>
			<span>烫头</span>
		</label>
	</div>
</template>
<scritp>
	export default {
		name:'App',
		data(){
			return {
				x:'',
			}
		}
	}
</script>

---

5、选择框select代码示例

<template>
	<div id='app'>
		你想要：{{x}}
		<hr>
		/* multiple是支持多选的意思 */
		<select multiple v-model='x'>
			<option value=''> -- </option>
			<option v-for="item in arr" :value='item.value' :key='item.value'>
				{{item.text}}
			</option>
		</select>
	</div>
</template>
<script>
	export default {
		name:'App',
		data(){
			return {
				arr:[
					{text:"抽烟",value:1},
					{text:"喝酒",value:2},
					{text:"烫头",value:3},
				],
				x:[],
			}
		}
	}
</script>

---

6、form表单代码示例

<template>
	<div id='app'>
		登录界面
		<!-- 监听表单的提交事件即可得到对应的信息 -->
		<form @submit.prevent='OnSubmit'>
			<label>
				<span>用户名</span>
				<input type='text' v-model='user.name' />
			</label>
			<label>
				<span>密码</span>
				<input type='password' v-model='user.password' />
			</label>
			<button type='submit'>登录</button>
		</form>
	</div>
</template>
<script>
	export default {
		name:'App',
		data(){
			return {
				user:{
					name:'',
					password:''
				}
				x:[],
			}
		},
		methods:{
			OnSubmit(){
				console.log(this.user);
			}
		}
	}
</script>

---

三、修饰符

.lazy：在表单事件中，用于鼠标光标失去焦点后触发，和onblur类似的原理

.number：在表单事件中，只取合法的数字部分。

.trim：用于去掉字符串两边的空格

---

四、v-model

实际上：v-model是v-bind:+v-on:input的语法糖

• v-model

<input type='text' v-model='user.name' />

---

• v-bind:+v-on:input等价于v-model

<!-- 这里不能直接写$$event，要写成$event.target.value。因为$$event会被当成一个原生的$$event -->
<input type='text' :value='user.name'
	@input="user.name=$event.target.value" />	

1、自己做一个MyInput

• MyInput.vue组件

<template>
	<div class='red'>
		<input :value='value' @input='onInput' />
	</div>
</template>
<script>
	export default {
		name:'MyInput',
		props:{
			value:{
				type:String;
			}
		},
		methods:{
			onInput(e){
				const value=e.target.value;
				/* 使用$emit触发事件 */
				this.$emit('input',value);
			}
		}
	}
</script>
<style scoped>
	.red {
		background:red;
	}
</style>

• 在主组件中使用它

<template>
	<div>
		{{user}}
		<hr>登录界面
		<form @submit.prevent='OnSubmit'>
			<label>
				<span>用户名</span>
				<MyInput v-model='user.name' />
			</label>
			<label>
				<span>密码</span>
				<input type='password' v-model='user.password' />
			</label>
			<button type='submit'>登录</button>
		</form>
	</div>
</template>
<script>
	import MyInput from './MyInput.vue';
	export default {
		components:{MyInput},
		name:'App',
		data(){
			return {
				user:{
					name:'',
					password:''
				}
				x:[],
			}
		},
		methods:{
			OnSubmit(){
				console.log(this.user);
			}
		}
	}
</script>

五、参考

Vue表单和v-model官方文档