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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
js函数调用的方式
May 06 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
深入理解node.js http模块
Jan 24 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
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
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
再次分享18个非常棒的jQuery表格插件
2011/04/10 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
js Array.slice的8种不同用法示例
2019/07/10 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
python调用私有属性的方法总结
2020/07/24 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
文明好少年事迹材料
2014/08/19 职场文书
物理课外活动总结
2014/08/27 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
网络舆情信息简报
2015/07/21 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书