23 数据双向绑定修饰符lazy、number、trim

弱小从来不是生存的障碍，傲慢才是。

一个人优秀到可怕的三个迹象： 高度的自律，近乎疯狂的努力；对自己好，学会不计代价的投资自己；相信自己，不在乎他人的眼光。

v-model 数据双向绑定修饰符

本文我们主要来看一下 v-model（数据双向绑定）中的修饰符。

lazy 修饰符

v-model 也有很多实用的修饰符，第一个修饰符 lazy，这个也叫做懒更新修饰符。

我们作一个 input 的绑定效果，现在 data 中声明一个 message 变量，值为空。然后在模板中写一个 并和 message 进行双向数据绑定。

data() {
    return {
        checked: true,
        name: '',
        message:'',
    }
},

模板中进行双向数据绑定：

    {{message}}

这时候当你在文本框中输入任何内容的时候，插值表达式会跟着改变。

如果你不想马上显示，就可以用 lazy 修饰符，这样就可以实现当输入完成后，失去焦点再进行改变。

    {{message}}

写完 lazy 修饰符后，可以看一下效果，这时候的效果就和我们想象的一样了。

DOCTYPE html>


    
    
    Demo22
    


    


const app=Vue.createApp({ 
data() {
    return {
        checked: true,
        name: '',
        message:'',
    }
},
methods:{

},
template:`
        

            {{message}}
        
        ` 
}) 
const vm=app.mount("#app")

number 修饰符

输入的内容无论是数字还是字母，最终都会变为字符串。 如果想最终输入的变成数字，你就可以使用 number 修饰符了。

比如我们现在去掉 lazy 修饰符，直接输入数字，这时候你修改插值表达式的结果，输出当前类型。

    {{typeof message}}

这时候你预览，就会发现最终 input 绑定的值会变成字符串类型。

这是html的底层逻辑造成的，这时候我们可以使用 number 修饰符，解决这个问题。

加上number修饰符后，你输入的值只要是数字，就变成了number类型。（也就是说，如果你输入的是字母，它还会是字符串类型）

    {{typeof message}}

trim 修饰符

trim 修饰符大家一定不陌生，它是用来消除 input 框输入内容前后的空格的。

现在我们在字符串上输入空格，其实它会在DOM元素上进行增加空格的，这个可以在控制台清楚的看出。

加入trim 修饰符后，Vue就会自动给我们去除前后的空格。

现在 data 中新声明一个变量，比如叫做 message1。

data() {
    return {
        //......
        message1: 'willem'
    }
},

用法如下:

    {{message1}}

这时候Vue就会自动为我们去除前后空格，但不会去除字符串中间的空格。

DOCTYPE html>


    
    
    Demo22
    


    


const app=Vue.createApp({ 
data() {
    return {
        message1: 'willem'
    }
},
methods:{

},
template:`
        

            {{message1}}
        
        ` 
}) 
const vm=app.mount("#app")