实例详解vue.js浅度监听和深度监听及watch用法


Posted in Javascript onAugust 16, 2018

第一个浅度监听:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <p>{{a}}</p>
  <p>{{b}}</p>
 </div>
 <script>
  
 var vm=new Vue({
  el:"#app",
  data:{
   a:10,
   b:15
  }
 });
 vm.$watch("a",function(){
  alert('a变化了');
  this.b=100;
 });
 document.onclick=function(){
  vm.a=2
 }
 </script>
 </body>
</html>

第二个深度监听

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <p>{{a|json}}</p>
  <p>{{b}}</p>
 </div>
 <script>
  var vm = new Vue({
  el: "#app",
  data: {
   a: { id: "1", title: "width" },
   b: 15
  }
  });
  vm.$watch("a", function() {
  alert('a变化了');
  this.b = 100;
  }, { deep: true });
  document.onclick = function() {
  vm.a.id = "2";
  }
 </script>
 </body>
</html>

ps:下面看下vue中watch用法

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $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实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 #Javascript
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
You might like
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
Python中zfill()方法的使用教程
2015/05/20 Python
python机器学习库常用汇总
2017/11/15 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python中pip的安装与使用教程
2018/08/10 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python常用函数与用法示例
2019/07/02 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
优秀护士获奖感言
2014/02/20 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python