v-model 修饰符

Vue 里面为 v-model 提供了一些可以用的修饰符，主要是可以帮我们限制一些使用者输入的行为
以下透过范例讲解每个修饰符帮我们做了甚麽事

1. .lazy

<!-- 在"change"时更新，而不是在"input"时更新 -->
<input v-model.lazy="msg">

还记得在前面有讲过当使用者每次操作输入框的值时(不管删除还是更新了一个字就会响应更新)
所以 .lazy 的作用是让 更新的动作不那麽的频繁

Day4. Vue的生命周期

(在"change"时更新，而不是在"input"时更新)
也就是当我们在输入的状态，是不会更新的，要等到 change 时才更新(离开 input 被 focus 的状态)

.lazy 范例

2. .number

<input v-model.number="num">
var app = new Vue({
  el: '#app',
  data:{
    num: 0 
  }
})

(a)..number会自动将使用者输入的值转成数值类型，如果输入的值无法被 parseFloat() 解析，则返回原始值
(b).即使 input type 指定为 number ，虽然看起来是数字，但资料型别会是 String
(c)..number 会限制只有 数值类型 的情况下才会写入

(c) 的部份比较特别下面一一解析~

➥ 当在输入状态时，虽然输入框还是看的到字串，但是离开 focus 状态，字串会自动消失不被写入

➥ 当字串夹杂在数字中间，离开 focus 状态，字串後面的就算是数字也会跟着消失不被写入

➥ 当为字串开头，就算後面接的是数字，就会变成(a) 的状况 ⟹ 返回原始值

.number 范例

3. .trim

<input v-model.trim="msg">

.trim 的作用为，去除输入框输入的头尾空白

字串是连起来的，头尾空白被删除，但是中间的空白仍存在
.trim 范例

┌( ಠ‿ಠ)┘ 之前没有用它，还特别去找 JS 正归表达式判断，现在想想好像傻傻的 XDDD

参考资料

Vue 官方文件