v-model可以实现双向数据绑定
v-model即可以作用于表单元素,又可以作用于自定义组件,无论是哪种情况,它都是一个语法糖,最终会生成一个属性和一个事件
在表单中使用
会根据作用的表单元素类型而生成合适的属性和事件
例如作用于普通文本框会生成value
属性和input
事件
作用于单选框或者多选框时,会生成checked属性和change事件
<input type="text" v-model="msg" />
<!-- 等效于 -->
<input type="text" :value="msg"
@input="msg=$event.target.value" />
<p>{{ msg }}</p>
v-model的本质是一个语法糖
input元素本身有个oninput事件,这个是HTML5新增的,类似于onchange,每当输入框内容变化的时候,就会触发oninput,把最新的value传给msg
所以可以得出一个结论,在给<input />
元素添加v-model
属性时,默认会把value
作为元素的属性,然后把"input"
事件作为实时传递value的触发事件
在组件中使用v-model
组件中的v-model生效原则
接收一个value属性
在有新的value上触发input事件
父组件在子组件上使用v-model,默认会用value的prop来接收父组件v-model绑定的值,
然后子组件通过input事件将更新后的值传递给父组件
父组件
<template>
<child v-model="number"></child>
</template>
<script>
export default {
data(){
return{
number:100,
}
}
};
</script>
子组件
<template>
<input type="text" :value="value" @input="$emit("input",$event.target.value)">
</template>
<script>
export default {
data() {
return {
props:["value"]
};
},
};
</script>
v-model修饰符
.lazy
在一些特殊的需求和场景下,你可能希望数据同步不是实时同步而是在触发 change 事件的时候进行数据同步,那么你可以添加 lazy 修饰符进行处理,使用的示例如下:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
在表单中处理输入验证必须是数字时,希望可以将用户输入的值自动转换成数字类型,那你可以在 v-model 上加上 number 修饰符进行处理。
<!-- 将输入的值自动转换成数字类型 -->
<input v-model.number="age" type="number">
.trim
对于用户在表单标签中输入的字符串,想去除首尾的空白字符,就可以用 trim 修饰符。
<!-- 去除输入值的首尾空白字符 -->
<input v-model.trim="msg">