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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
JS生成随机打乱数组的方法示例
Dec 23 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 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将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
人事主管岗位职责范本
2013/12/04 职场文书
文明工地标语
2014/06/16 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
实习计划书范文
2015/01/16 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android