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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jquery实现图片轮播器
May 23 jQuery
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
保护环境倡议书范文
2014/05/13 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015年党小组工作总结
2015/05/26 职场文书
贷款收入证明格式
2015/06/24 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android