• vue修饰符 lazy number trim


    vue事件修饰符,键盘修饰符,他用的比较多,都应该比较了解,而 今天的 这三个修饰符是用于修饰 v-model

    .lazy

    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步:也就是在失去焦点 或者 按下回车键时才更新

    1. <input v-model.lazy="msg">

    : 需要在原生input中使用

    直接输入一个 1 打印一下,看看顺序执行

    1. // html
    2. "text"
    3. placeholder="请输入账号"
    4. @change="log($event,'change')"
    5. @input="log($event,'input')"
    6. v-model.lazy="zh"
    7. >
    8. // js
    9. watch: {
    10. zh(val) {
    11. console.log('lazy', val)
    12. },
    13. },
    14. methods: {
    15. log(val, str) {
    16. console.log(val, str)
    17. }
    18. }

    .number

    如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

    <input v-model.number="age" type="number">

    因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。输入的值自动在字符串和数字之中转换一般配合数字输入框使用

    1. number="zh">
    2. watch: {
    3. zh(val) {
    4. console.log(typeof val)
    5. console.log(val)
    6. },
    7. },

    不加 number 修饰符前

     

    加上修饰符

     

     trim

    自动过滤用户输入的首尾空白字符

    当我们绑定一个  前后有空白符 的字符串时,自动帮我们去除前后的空白,在我们给 input 绑定 v-model.trim 时,在字符串 前后 不能输入空白符,但是在字符串中可以:

    账        号        ,

    除了这个trim修饰符,还有一个同名的方法 和 他的作用一致:

    返回值为:已移除前导空格、尾随空格和行终止符的原始字符串

    trim 方法不修改该字符串

    使用:

    1. const str = ' 账 号 '
    2. console.log(str)
    3. console.log(str.trim())

  • 相关阅读:
    [附源码]java毕业设计旅游景点推荐系统
    【SpringCloudAlibaba】Seata分布式事务使用
    MySQL表分区
    HashMap底层原理
    select/poll/epoll 学习
    7-FreeRTOS软件定时器
    Llama2-Chinese项目:2.1-Atom-7B预训练
    苍穹外卖-day11
    如何正确的写出第一个java程序:hello java
    力扣:1143.最长公共子序列
  • 原文地址:https://blog.csdn.net/paidaboluo/article/details/126425246