watch侦听器案例

2.

<template>
  <div>
      <span>用户名：</span>
      <span>
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
    <!--      
      侦听器
      1、采用侦听器监听用户名的变化
      2、调用后台接口进行验证
      3、根据验证的结果调整提示信息
     -->
</template>
<script>
export default {
  data() {
    return {
        uname: '',
        tip: ''
    };
  },
  methods: {
    checkName(uname) {
      // 调用接口，但是可以使用定时任务的方式模拟接口调用
      setTimeout( ()=> {
        // 模拟接口调用
        if(uname == 'admin') {
          this.tip = '用户名已经存在，请更换一个';
        } else {
          this.tip = '用户名可以使用';
        }
      }, 2000);
    }
  },
  watch: {
    uname(val) {
      // 调用后台接口验证用户名的合法性
      this.checkName(val);
      // 修改提示信息
      this.tip = '正在验证...';
    }
  }
};
</script>