Vue implements verification whether the username is available

<div id="app">
  <span>Username:</span>
  <span>
   <input type="text" v-model.lazy="uname">
  </span>
  <span>
   {{tip}}
  </span>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
  /* Listener uses the listener to monitor changes in the user name. If the user name changes (call the background interface for verification)
  Adjust the prompt information according to the verification results*/
  var vm = new Vue({
   el: "#app",
   data: {
    uname: '',
    tip: ''
   },
   methods: {
    checkName: function (uname) {
     //Call the interface, but you can use the scheduled task to simulate the interface call var that = this;
     setTimeout(function () {
      // Simulate interface call if (uname == 'admin') {
       that.tip = 'The user name already exists, please change it'
      } else {
       that.tip = 'Username can be used'
      }
     }, 1000)
    }
   },
   watch:
    uname: function (val) {
     //Call the backend interface to verify the legitimacy of the user name this.checkName(val);
     this.tip = 'Verifying...'
    }
   },

  });
</script>