这个需求可能大家第一反应都是会利用 input 控件的 type 属性，设置他为指定的手机号格式 <input type='tel'/> 这个tel属性就是在移动端当中常用的属性，如果用的是自带的键盘，应该对这个写法很友好。但是如果是使用的非自带的键盘，还是有可能被用户输入违法字符。虽然看起来对用户体验没啥用影响，但是正常开发过程当中，这些小细节需要格外注意。当我们指定了这个类型的 input 的时候，可以配套使用 input 的一个属性， maxlength ,可以不使用正则就限制用户输入的最大长度。
如果input自带的属性不管用的时候，相信我们想到的办法就是使用正则进行判断。
正则
- /\d/ 表示匹配的是数字
- /\D/ 表示匹配的是所有非数字
如果使用正则，我们的理想话状态就是可以获取用户输入的当前值，然后用它和正则匹配，不合法把字符串剔除他。但是这个方法在实现的过程的当中可能存在一些问题
- 比如我遇见过在谷歌浏览器当中input支持e.data的属性来读取当前输入的值（只读），不合法截取
- e.key 也是获取当前输入值的属性，他的支持性比e.data友好很多
- 一般大家比较熟悉的都是e.target.value 但是他表示的是用户输入的所有数据，还是需要截取，但是对于用户输入一些表情什么的阻止不是很好。
所以我推荐大家使用这个方法
onkeyup（键盘抬起事件） 和onafterparse的（粘贴之后触发） 这两个事件 来控制用户的输入。
<template>
<div>
<input type='tel' maxlenth='11' @keyup="checkInput" @afterpasre="checkInput"/>
</div>
<template/>
<script>
methods:{
checkInput(e){
e.target.value = e.target.value.replace(/\D/g,'')
}
}
<script/>