vue篇-v-model原理、v-model修饰符

v-model原理

v-model其实是一个语法糖,相当于两个指令的集合

(v-bind绑定一个value属性,v-on:input给当前元素绑定一个input事件)

<input type="text" name="" id="" v-model='message'>

<input type="text" :value = "message" @input = "message = $event.target.value">

v-model修饰符

1.lazy修饰符可以让数据在失去焦点或者回车时才会更新
2.number修饰符可以让在输入框中输入的内容自动转成数字类型
3.trim修饰符可以过滤内容左右两边的空格

 <input type="text" v-model.lazy = 'message'>
 <input type="number" v-model.number = 'age'>
 <input type="text" v-model.trim = 'name'>