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

阳光穿透心脏的1/2处 2023-10-06 20:33 12阅读 0赞

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

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

#### \[基础\]Vue表单的双向数据绑定2-修饰符 ####

*  v-model 数据双向绑定修饰符
 *   *  lazy 修饰符
     *  number 修饰符
     *  trim 修饰符

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

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

### lazy 修饰符 ###

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

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

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

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

<div>
        {
       {message}}<input v-model="message" />
    </div>

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

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

<div>
        {
       {message}}<input v-model.lazy="message" />
    </div>

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

![在这里插入图片描述][4fd4403cf29c4f27b780c5f758e21a00.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo22</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
    const app=Vue.createApp({
           
    data() {
          
        return {
          
            checked: true,
            name: '',
            message:'',
        }
    },
    methods:{
          
    
    },
    template:`
            <div>
                {
           {message}}<input v-model.lazy="message" />
            </div>
            ` 
    }) 
    const vm=app.mount("#app")
    </script>
    </html>

### number 修饰符 ###

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

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

<div>
        {
       {typeof message}}<input v-model="message" />
    </div>

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

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

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

<div>
        {
       {typeof message}}<input v-model.number="message" />
    </div>

### trim 修饰符 ###

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

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

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

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

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

用法如下:

<div>
        {
       {message1}}<input v-model.trim="message1" />
    </div>

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

![在这里插入图片描述][d6cac0bd88fd48879fe1ccb62a32a8b8.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo22</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
    const app=Vue.createApp({
           
    data() {
          
        return {
          
            message1: 'willem'
        }
    },
    methods:{
          
    
    },
    template:`
            <div>
                {
           {message1}}<input v-model.trim="message1" />
            </div>
            ` 
    }) 
    const vm=app.mount("#app")
    </script>
    </html>

[4fd4403cf29c4f27b780c5f758e21a00.png]: https://img-blog.csdnimg.cn/4fd4403cf29c4f27b780c5f758e21a00.png
[d6cac0bd88fd48879fe1ccb62a32a8b8.png]: https://img-blog.csdnimg.cn/d6cac0bd88fd48879fe1ccb62a32a8b8.png