这篇来讲一下修饰符，也算是比较细节的一些地方，用得恰当能省下不少函数封装代码。

v-model的三个修饰符

1. v-model.number

// vue
<template>
  <div>
    <input type="text" v-model="num"> <span>数字{{num}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       num: 0,
     }
   }
}
</script>

<style>

</style>

如图所示，众所周知，这是很基础很常见的输入框，现在他的初始值是0，旁边的span也会是0。那现在我们去掉0，改成任意的字符或者在0后面加上1，“01”，那么我们会发现span和input都变成了输入的字符或者"01"。我们的需求是限制用户输入只能为数字，方法多种，但多数都需要函数，如果我们改成下面这种，那就省事很多。话不多说，贴图，往你脸上贴那种。

// vue
<template>
  <div>
    <input type="text" v-model.number="num"> <span>数字{{num}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       num: 0,
     }
   }
}
</script>

<style>

</style>

呐，在v-model后面加上.number就可以限制输入的类型必须为数字了。本系列第一篇文章当中，也有类似的需求，咱使用el-input-number组件做了些小花招。那个和这里区别就是，这里输入内容就会去判断类型，el-input-number组件则是在blur事件后判断，也就是input失去焦点的时候。但这不是说，el-input-number那种方式就不好，但就小数点精确后两位这种场景，还是用el-input-number更香。顺便附上前面两章地址。关于写vue时候发现的那些坑（一），关于写vue时候发现的那些坑（二）

2. v-mdel.trim

同样是input输入框，现在有个用户需求，就是用户在输入框输入查询条件的时候要去除前后空格。比方说在商品列表，用户输入了商品名称，但是不巧，人家是在和好基友聊天的时候，好基友给推荐的某款耳机，把名字发给他就是不发地址。他也懒的敲，然后直接复制了名字，在商品列表查询。也不知道微信改了啥，好家伙，复制出来的名称前面后面都有空格，虽然商品也查出来了，但是输入框里面这名字没贴边，好家伙，强迫症难受。那么，作为前端的在座各位，该怎么做？哎，贴图！呸，贴代码！

// vue
<template>
  <div>
    <input type="text" v-model.trim="name"> <span>商品名称{{name}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       name: '',
     }
   }
}
</script>

<style>

</style>

加了.trim修饰符，就可以实现去除前后空格的效果，那么有人会说了，那我中间加个空格咧，那不行。只针对前后空格，中间空格其实相当于内容了。

3. v-model.lazy

哎，这是用来干啥的，我们发现每次在input输入内容，vue都会实时更新，这点可以用vue-devtools工具看到实时的数据变化，一改就更新。就是这工具。

那么假如团队来个需求，要你做像百度那样，输入就马上发送请求获取数据那种，但是服务器负载能力又有限，又或者团队希望，用户输完在发生请求，且如果第二次输入的内容和第一次一致，则不发生请求。用户场景，举个例子，用户想买衣服，比如碎花裙，输入框只会在碎花裙输完再去获取请求，然后用户又输入了一次碎花裙，此时不发生请求。只会在内容变化完成之后才会发送请求。那么此时就是.lazy出场了。

// vue
<template>
  <div>
    <input type="text" v-model.lazy="name"> <span>商品名称{{name}}</span>
  </div>
</template>

<script>
export default {
   data () {
     return {
       name: '',
     }
   }
}
</script>

<style>

</style>

代码如上所示，.lazy不会马上更新数据，它只会在change事件之后在更新。第一次name的初始值是空串，所以当你输入碎花裙，则发送请求，然后第二次在输入碎花裙，则不发生请求。

以上，是v-model的修饰符，希望对你有用！

关于写vue时候发现的那些坑（三）

v-model的三个修饰符

1. v-model.number

2. v-mdel.trim

3. v-model.lazy