实例详解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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
js 匿名调用实现代码
Jun 19 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
微信小程序上传图片实例
May 28 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
在JavaScript中如何使用宏详解
May 06 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
javascript天然的迭代器
2010/10/29 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
高一历史教学反思
2014/01/13 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
党员干部承诺书
2014/03/25 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
2014年商场工作总结
2014/11/22 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
python单元测试之pytest的使用
2021/06/07 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript
Python学习之迭代器详解
2022/04/01 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL