Vue数据监听方法watch的使用


Posted in Javascript onMarch 28, 2018

watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来

当Vue视图中的数据变化时, 关联的函数会被执行

Vue数据监听方法watch的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监听方法watch的使用</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    var vm = new Vue({
      el: "#root",
      data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
      template: `<div><div>姓名: {{obj.name}}</div>
        <div>电话: {{tel}}</div>
        <input type="text" v-model="obj.name">
        <input type="text" v-model="tel"></div>`,
      watch: {
        obj: {
         handler(){
           console.log("obj被改变");
         },
          // 页面加载之初先执行一次handle
         immediate: true,
          // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
         deep: true
        },
        "obj.name": {
          handler(){
            console.log("=>obj.name被改变");
          }
        },
        tel:{
          handler(){
            console.log("tel被改变");
          }
        }
      }
    })
  </script>
</body>
</html>

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;

//使用官方vue-cli脚手架书写
<template>
//观察数据为字符串或数组

 <input v-model="example0"/>

 <input v-model="example1"/>

/当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数

 <input v-model="example2.inner0"/>
</template>
<script>

 export default {



data(){




return {





example0:"",





example1:"",





example2:{






inner0:1,






innner1:2





}




}



},



watch:{




example0(curVal,oldVal){





console.log(curVal,oldVal);




},




example1:'a',//值可以为methods的方法名




example2:{




 //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象





handler(curVal,oldVal){






conosle.log(curVal,oldVal)





},





deep:true




}



},



methods:{




a(curVal,oldVal){





conosle.log(curVal,oldVal)




}



}
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
微信小程序实现签字功能
Dec 23 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
Vue 自定义动态组件实例详解
Mar 28 #Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
增大python字体的方法步骤
2020/07/05 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
Python内置函数及功能简介汇总
2020/10/13 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
法人授权委托书格式
2014/04/08 职场文书
人事局接收函
2015/01/30 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js