与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机
.lazy:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>修饰符</title>
</head>
<body>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<!--.lazy 在输入框中,v-model默认是在input事件中同步输入框的数据(除了提示中
介绍的中文输入法情况外),使用修饰符 .lazy 会转变为在 change事件中同步,示例-->
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
</body>
</html>
这时 message 并不是实时变化的,而是在失去焦点和按回车键才更新

lazy.png
.number:
<!--.number: 使用修饰符.number 可以将输入转换为Number类型,否则虽然输入
的是数字,但它的类型其实是String,比如在数字输入框时会比较有用,示例-->
<div id="app2">
<input type="number" v-model.number="message">
<p>{{ typeof message }}</p>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
message:123
}
})
</script>

number.png
.trim:
<!--.trim 修饰符 .trim 可以自动过滤输入的首尾空格,示例-->
<div id="app3">
<input type="text" v-model.trim="message">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el:'#app3',
data:{
message:''
}
})
</script>

trim.png