实例详解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 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Python只用40行代码编写的计算器实例
2017/05/10 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
求职简历自荐信范文
2013/10/21 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
转让协议书范本
2014/04/15 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
中队活动总结
2014/08/27 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
课外活动总结
2015/02/04 职场文书
小学教师求职信范文
2015/03/20 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
如何在Python项目中引入日志
2021/05/31 Python