Vue-入门-09-侦听器的用法

最新推荐文章于 2022-12-04 13:36:26 发布

EchoByCode

最新推荐文章于 2022-12-04 13:36:26 发布

阅读量116

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45438044/article/details/122102661

版权

Vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1、1 侦听器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>用户名：</span>
      <span>
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*      
      侦听器：一般用于异步或者开销较大的操作
      1、采用侦听器监听用户名的变化
      2、调用后台接口进行验证
      3、根据验证的结果调整提示信息
    */
    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 中的属性 一定是data 中 已经存在的数据
      watch: {
        uname: function(val){
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });
  </script>
</body>
</html>

1、2 效果如下：
在这里插入图片描述

EchoByCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-入门-09-侦听器的用法

1、1 侦听器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div> <span>用户名：</span> <span>
复制链接

扫一扫

专栏目录