# 1 v-model

v-model 只能用在:<input> <select> <textarea> <components>

v-model 本质上是一个语法糖。如下代码 <input v-model="message"> 本质上是 < input :value="message" @input="message= $event.target.value"> ,其中 @input 是对 <input> 输入事件的一个监听:value="message" 是将监听事件中的数据放入到 input,下面代码是 v-model 的一个简单的例子。在这边需要强调一点,v-model 不仅可以给 input 赋值还可以获取 input 中的数据,而且数据的获取是实时的,因为语法糖中是用 @input 对输入框进行监听的

<input type="text" v-bind:value="message" v-on:input="message =$event.target.value">
<h1></h1>

# v-model 原理

1.v-bind 绑定一个 value 属性

2.v-on 指令给当前元素绑定 input 事件

# 2 v-model Radio

<label for="man">
    <input type="radio" id="man" name="sex" value="">
</label>
<label for="woman">
    <input type="radio" id="woman" name="sex" value="">
</label>
<H2>您选择的性别是:</H2

<label for="man">
    <input type="radio" id="man" value="" v-model="sex">
</label>
<label for="woman">
    <input type="radio" id="woman" value="" v-model="sex">
</label>
<H2>您选择的性别是:</H2>

加上 v-model = sex 后,可以不用加 name 属性,也可以达到按钮互斥效果。效果图:

<template>
	<div id="app">
		<!-- 单选按钮 -->
		<label for="man">
			<input type="radio" id="man" value="" v-model="sex">
		</label>
		<label for="woman">
			<input type="radio" id="woman" value="" v-model="sex">
		</label>
		<H2>您选择的性别是:</H2>
		<!-- 单选框 -->
		<label for="license">
			<input type="checkbox" id="licenseId" v-model="isAgree">同意协议
		</label>
		<H2>您选择的性别是:</H2>
		<!-- 多选框 -->
		<input type="checkbox" value="读书" id="read" v-model="hobbies">
		<label for="read">读书</label>
		<input type="checkbox" value="听音乐" id="music" v-model="hobbies">
		<label for="music">听音乐</label>
		<input type="checkbox" value="跑步" id="run" v-model="hobbies">
		<label for="run">跑步</label>
		<H2>您选择的爱好是:</H2>
	</div>
</template>
<script>
	import HelloWorld from './components/HelloWorld.vue'
	export default {
		name: 'app',
		components: {
			HelloWorld
		},
		data() {
			return {
				message: 'v-model演示',
				sex: '男',
				isAgree: false,
				hobbies:[]
			}
		},
		methods: {}
	}
</script>
<style>
</style>

# 2 修饰符

  • lazy 修饰符

默认情况下,v-model 默认是在 input 事件中同步输入框的数据,即一旦有数据发生改变对应的 data 中的数据就会自动发生改变

lazy 修饰符可以让数据失去焦点或者回车时才会更新

  • number 修饰符

    默认情况下,在输入框中无论输入的是字母还是数字,都会被当做字符串类型处理,number 修饰符可以让在输入框中输入的内容自动转成数字类型

  • trim 修饰符

    trim 修饰符可以过滤内容左右两边的空格

    看看

更新于