1、v-model.lazy=“xxx”
默认情况下，v-model它是在每次输入数据时触发input事件来更新数据的
使用 .lazy 修饰符后，当改变数据失去焦点-触发change事件来进行更新数据
2、v-model.number="xxx"
它会自动将输入的值自动转成number 类型（可以通过parseFloat转成数值，则会自动转，转不成功的返回原始：asdf123）
会自动开启 type=number 类型
如果输入的值是数字开头，会舍弃非数字后面的值
比如: 123aaaa123,转成的值为123
3、v-model.trim 去除左右空格
代码例子：
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>v-model修饰符 .lazy .number .trimtitle>
- head>
- <body>
-
- <div id="app">
- <h3>v-model.lazy触发change事件来更新h3>
- <input v-model.lazy="msg" @input="doInput" @change="doChange">
- <span>{{msg}}span>
-
- <h3>v-model.number转成number类型h3>
- <input v-model.number="msg">
- <input v-model="msg" type="number">
- <span>输入的值的类型为{{typeof msg}}span>
-
- <h3>v-model.trim 去除左右空格h3>
- <input v-model.trim="msg">
- <span>{{msg}}值的长度{{msg.length}}span>
- div>
-
-
- <script src="./node_modules/vue/dist/vue.global.js">script>
- <script type="text/javascript">
- const {createApp} = Vue;
- const app = createApp({
- data(){
- return {
- msg:''
- }
- },
- methods:{
- doInput(event){
- console.log("doInput",event)
- },
- doChange(event){
- console.log("doChange",event)
- }
- }
- }).mount("#app");
- console.log("app:",app);
- script>
- body>
- html>