25.侦听器 watch

最新推荐文章于 2024-04-27 16:04:53 发布

code_dream_wq

最新推荐文章于 2024-04-27 16:04:53 发布

阅读量92

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110231191

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

侦听器 watch

- 使用watch来响应数据的变化
- 一般用于异步或者开销较大的操作
- watch 中的属性一定是data 中已经存在的数据
- **当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听**

<!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='firstName'>
      </span>
    </div>
    <div>
      <span>姓：</span>
      <span>
        <input type="text" v-model='lastName'>
      </span>
    </div>
    <div>{{fullName}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Green',
        fullName: 'Jim Green'
      },
      // computed: {
      //   fullName: function(){
      //     return this.firstName + ' ' + this.lastName;
      //   }
      // },
	  //watch  属性 定义 和 data 已经 methods 平级 
      watch: {
		   //   注意：  这里firstName  对应着data 中的 firstName 
		                  //   当 firstName 值 改变的时候  会自动触发 watch
        firstName: function(val) {
          this.fullName = val + ' ' + this.lastName;
        },
		//   注意：  这里 lastName 对应着data 中的 lastName
        lastName: function(val) {
          this.fullName = this.firstName + ' ' + val;
        }
      }
    });
  </script>
</body>
</html>

例子：

<!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: {
        uname: function(val){
          // 调用后台接口验证用户名的合法性
          this.checkName(val);
          // 修改提示信息
          this.tip = '正在验证...';
        }
      }
    });

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

code_dream_wq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
25.侦听器 watch

侦听器 watch- 使用watch来响应数据的变化- 一般用于异步或者开销较大的操作- watch 中的属性一定是data 中已经存在的数据- **当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">..
复制链接

扫一扫

专栏目录