lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新
<input type="text" id="inp" v-model.lazy="message">
使用lazy可以使数据不需要多次重写，减少消耗。
在默认情况下，在输入框中无论我们输入的是字母还是数字，都是会被当做是字符串类型进行处理
number 修饰符: 使输入框中输入的内容自动转换为数字类型
<input type="text" name="" id="age" v-model.number="age">
trim 修饰符: 过滤掉内容左右两边的的空格
<input type="text" name="" id="str" v-model="str">
浏览器显示空格会默认过滤掉，但是里面的数据并没有过滤
<input type="text" name="" id="str" v-model.trim="str">
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<label for="inp">
<!-- lazy 修饰符: 使模型绑定的数据只有在失去焦点或者是按下回车时才会更新 -->
<input type="text" id="inp" v-model.lazy="message">
</label>
<br>
<!-- 在默认情况下，在输入框中无论我们输入的是字母还是数字，都是会被当做是字符串类型进行处理 -->
<!-- number 修饰符: 使输入框中输入的内容自动转换为数字类型 -->
<label for="age">
<input type="text" name="" id="age" v-model="age">
</label>
<br>
<!-- trim 修饰符: 过滤掉内容左右两边的的空格 -->
<label for="str">
<input type="text" name="" id="str" v-model.trim="str">
</label>
<br>
<h2>您输入的字符:{{str}}</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
message: '你好!',
age: 10,
str: ''
}, //定义数据
methods: {}, //定义函数
computed: {},//定义计算函数
filters: {},//
});
</script>
</body>
</html>
