vue watch侦听器案例验证内容

最新推荐文章于 2025-05-18 20:32:23 发布

昵称2-20个字符

最新推荐文章于 2025-05-18 20:32:23 发布

阅读量330

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_39517183/article/details/106795362

版权

demo 同时被 2 个专栏收录

21 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

本文通过具体的Vue组件示例，深入探讨了Vue中watch侦听器的使用方法，详细解释了如何设置和运用watch侦听器进行数据变化监听，并提供了一个验证内容变化的demo，帮助开发者更好地理解和应用Vue的watch特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <span>用户名：</span>
      <span>
      	//lazy 修饰符，input状态发生改变时 change 事件之后进行同步：
        <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: {
        uname: function(val){
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });

  </script>
</body>
</html>