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>