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

目录
文章目录隐藏
  1. v-model 数据双向绑定修饰符

本文我们主要来看一下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 修饰符后,可以看一下效果,这时候的效果就和我们想象的一样了。

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: 'mybj123.com'
    }
},

用法如下:

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 23. [基础]Vue表单的双向数据绑定2-修饰符

发表回复