<!DOCTYPE HTML>
<html lang= 'en'>
<head>
<meta charset = 'UTF-8'/>
</head>
<body>
<div id = 'box'>
<!--.lazy使v-model变懒,鼠标失去焦点才提交数据-->
<input type = 'text' v-model.lazy = 'title'/>
{{title}}
<input type = 'text' v-model.number = 'mynumber'/>
{{mynumber}}
<!--.trim去掉首尾空格-->
<input type = 'text' v-model.trim = 'mytrim'/>
|{{mytrim}}|
</div>
<script src = 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
var vm = new Vue({
el:'#box',
data:{
title:'',
mynumber:0,
mytrim:'',
},
});
</script>
</body>
</html>
1、v-model.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步，鼠标失去焦点才同步数据
2、v-model.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，无论文本框中输入的是字符串，还是数字，打印出来的类型都是string 当用了number修饰符后，如果输入数字，会转换成数值型然后再赋给value，如果输入的不是数字，就不会赋值
3、v-model.trim
清除首尾空格