vue实现手机号码的校验(防抖函数的应用场景)

  上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询、scroller、onresize等场景;今天这篇我们来讲防抖函数的应用场景::

  通过上一篇博文的学习,我们知道了防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次;

  如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://www.cnblogs.com/dengyao-blogs/p/11436228.html

  防抖函数一般是用于频繁触发事件,而我们只需要它触发一次的场景,比如:输入框的oninput事件、button按钮点击事件、点赞等操作场景;

  今天我们讲的demo场景是防抖函数实现手机号码校验:

  HTML视图层代码:

 

  <div id="app">
       <input type="text" placeholder="请输入手机号码" v-model="val" @keyup="check"/>
       <div class="box" v-show="statu==true">您输入的手机号码格式正确div>
   div>

 

  首先我们视图层代码是一个输入框后面加上一个div作为提示信息,HTML代码很简单就不过多讲解了;

  JS数据逻辑层代码:

  

    //这里我们要引入一个文件,文件里面是防抖函数的是实现
  

你可能感兴趣的:(vue实现手机号码的校验(防抖函数的应用场景))