实例详解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中的prototype使用说明
Apr 13 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php 文件上传实例代码
2012/04/19 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
清除div下面的所有标签的方法
2014/02/17 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python实现自动更换ip的方法
2015/05/05 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Python面向对象封装操作案例详解
2019/12/31 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python元组拆包实现方法
2021/02/28 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
材料采购员岗位职责
2013/12/17 职场文书
环保倡议书500字
2014/05/15 职场文书
文明家庭事迹材料
2014/12/20 职场文书
社区母亲节活动总结
2015/02/10 职场文书
网络销售员岗位职责
2015/04/11 职场文书
入队仪式主持词
2015/07/04 职场文书
公证书
2019/04/17 职场文书