vue侦听器应用场景之处理异步操作

1129-徐同学

发表文章数:61

热门标签

首页 » 未分类 » 正文


**

vue侦听器应用场景之处理异步操作

**
具体我们通过验证用户名的可用性,来演示监听器的用法。

验证用户名,一般用于注册用户,例如各大博客网站等,你注册一个账号,后台要先验证一下,你这个账号是不是已经被别人注册过了。如果这个账号已经被使用了就给您一个提示-“该用户名已经被使用,请更换用户名“,如果该账号没有被使用,就可以正常注册了。

思考…如何实现这样一个功能呢。

首先,我们要进行数据的绑定:

<div id="app">
    <div>
      <span>用户名:</span>
      <span>
        //通过.lazy修改触发方式
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
  </div>
var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },

接下来,来讲解比较重要的一步,如何通过侦听器监听输入信息的变化。
分三步来完成:

  1. 采用侦听器监听用户名的变化
  2. 调用后台接口进行验证
  3. 根据验证的结果调整提示信息
var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
        tip: ''
      },
      methods: {
        checkName: function(uname) {
          // 调用接口,但是可以使用定时任务的方式模拟接口调用
          // setTimeout中的this指的是window
          // 所以呢,我们要在外面缓存一下this
          var that = this;
          setTimeout(function(){
            // 模拟接口调用
            if(uname == 'admin') {
              
              that.tip = '用户名已经存在,请更换一个';
            }else{
              that.tip = '用户名可以使用';
            }
          }, 2000);
        }
      },
      // 第一步添加侦听器的功能
      watch: {
        // 括号里的参数就是输入的用户名,取个名字叫val
        uname: function(val){
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });

到此,我们的vue侦听器应用场景之处理异步操作就讲解结束了。

标签:

拜师教育学员文章:作者:1129-徐同学, 转载或复制请以 超链接形式 并注明出处 拜师资源博客
原文地址:《vue侦听器应用场景之处理异步操作》 发布于2020-06-05

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu3.3主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录