VUE-侦听器实现验证用户名是否被注册过

1 通过v-model实现数据绑定
2 需要提供验证信息
3 需要侦听器监听输入信息的变化
4 通过v-model.lazy监听事件

代码如下

 <div id="app">
    <span>用户名：</span>
    <span>
      <input type="text" v-model.lazy='uname'>
    </span>
    <span>{
   
   {tip}}</span>
  </div>

var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    
        uname: '',
        tip: ''
      },
      methods: {
    
    
        checkName: function (uname) {
    
    
          //调用接口 但是可以使用定时任务的方式模拟接口调用
          var that = this;
          setTimeout(function () {
    
    
            //模拟接口调用
            if (uname == 'admin') {
    
    
              that.tip = '用户名已经存在，请更换'
            } else {
    
    
              that.tip = '用户名可以使用'
            }
          }, 2000)
        }
      },
      watch: {
    
    
        uname: function (val) {
    
    
          //调用后台接口验证用户名的合法性
          this.checkName(val);
          //修改验证信息
          this.tip = '正在验证。。。'
        }
      },
    });

效果