vue修饰符 lazy number trim

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

.lazy

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

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

注： 需要在原生input中使用

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

// html
<input type="text"
       placeholder="请输入账号"
       @change="log($event,'change')"
       @input="log($event,'input')"
       v-model.lazy="zh"
>

// js
watch: {
  zh(val) {
    console.log('lazy', val)
  },
},
methods: {
  log(val, str) {
    console.log(val, str)
  }
}

.number

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

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

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

​<input v-model.number="zh">

watch: {
  zh(val) {
    console.log(typeof val)
    console.log(val)
  },
},

不加 number 修饰符前

 

加上修饰符

 

 trim

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

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

账        号        ，

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

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

trim 方法不修改该字符串

使用：

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