实例详解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倒计时页面跳转实例小结
Sep 11 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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 获取客户端的真实ip
2009/11/30 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
python Paramiko使用示例
2020/09/21 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
市级文明单位申报材料
2014/05/07 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
税务会计岗位职责
2015/04/02 职场文书
企业法人代表证明书
2015/06/18 职场文书
老人与海读书笔记
2015/06/26 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python