Vue侦听器的用法即应用场景

最新推荐文章于 2024-03-14 11:22:37 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2024-03-14 11:22:37 发布

阅读量922

点赞数

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

本文链接：https://blog.csdn.net/yueqin0512/article/details/109742015

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

侦听器的应用场景

数据变化时执行异步或开销较大的数据
在这里插入图片描述

侦听器的用法

<body>
    <div id="app">
      <div>
        <span>名：</span>
        <span>
          <input type="text" v-model="firstName">
        </span>
      </div>
      <div>
        <span>姓：</span>
        <span>
          <input type="text" v-model="lastName">
        </span>
      </div>
      <div>{{fullName}}</div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
              firstName:"Jim",
              lastName:"Brown",
              fullName:"Jim Brown"
            },
            computed: {
              // fullName: function(){
              //   return this.fullName = this.firstName + ' ' + this.lastName;
              // }
            },
            watch: {
              firstName:function(val){
                this.fullName = val + '' + this.lastName;
              },
              lastName:function(val){
                this.fullName = this.firstName + '' +val;
              }
            }
        });
    </script>
</body>

当改变文本框中的姓或名时下面的全名也会做出相应改变（用方法也可以实现）
在这里插入图片描述

侦听器的应用场景——验证用户名是否可用

需求：输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示重新输入，如果不存在，提示可以使用

分析：

通过v-model实现数据绑定
需要提供提示信息
需要侦听器监听输入信息的变化
需要修改触发的事件（失去焦点lazy）

<body>
    <div id="app">
      <div>
        <span>用户名：</span>
        <span>
          <input type="text" v-model.lazy="uname">
        </span>
        <span>{{tip}}</span>
      </div>
    </div>
    <script>
      /*
        侦听器
        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 = "用户名可以使用"
                  }
                },1000);
              }
            },
            watch: {
              uname: function(val){
                //调用后台接口验证用户名的合法性
                this.checkName(val);
                //修改提示信息
                this.tip = "正在验证...";
              }
            }
        });
    </script>
</body>

效果：
在这里插入图片描述

监听指定数据的变化，当数据发生变化时，触发侦听器所绑定的那个函数，然后在函数中处理异步任务，并且可以随时修改指定状态的变化，满足特殊的场景，处理异步的操作

吃不胖的猫o(=^ェ^=)m

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue侦听器的用法即应用场景

侦听器的应用场景数据变化时执行异步或开销较大的数据侦听器的用法<body> <div id="app"> <div> <span>名：</span> <span> <input type="text" v-model="firstName"> </span> </div> <d
复制链接

扫一扫

专栏目录