vue.js中$watch的用法示例


Posted in Javascript onOctober 04, 2016

前言

vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb

Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。

在实例化时为每个键调用 $watch() ;

<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重写Cognos右键菜单的实现代码
Apr 11 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jQuery选择器全集详解
Nov 24 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 #Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 #Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 #Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 #Javascript
json定义及jquery操作json的方法
Oct 03 #Javascript
javascript中异常处理案例(推荐)
Oct 03 #Javascript
switch语句的妙用(必看篇)
Oct 03 #Javascript
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
yii用户注册表单验证实例
2015/12/26 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
前端性能优化及技巧
2016/05/06 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
javaScript封装的各种写法
2017/08/14 Javascript
js实现随机点名小功能
2017/08/17 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
微信小程序生成二维码的示例代码
2019/03/29 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python根据路径导入模块的方法
2014/09/30 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python3.7 的新特性详解
2019/07/25 Python
python 怎样进行内存管理
2020/11/10 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
社区党务公开实施方案
2014/03/18 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
校庆标语集锦
2014/06/25 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书