Vue.Js中的$watch()方法总结


Posted in Javascript onMarch 23, 2017

前言

最近公司用vue框架写交互,之前没怎么写过,但是很多数据双向绑定的东东跟angular很像!所以上手很快!哈哈

今天就碰到一个vue的问题啊!!产品需求是,datetimepick时间选择器一更改时间,就重新ajax获取数据渲染图表,很简单的需求啊!用angula ng-change监听inpu框框,分分钟搞定啊!用特么js原生 on-change也分分钟搞定啊!问题是尼玛的VueJs对input框没有change事件!尼玛坑爹啊!(不知道是不是我没找到,反正api里没有,goole了半天,也没有,要是有的话,麻烦留言告诉我,谢谢!!)

翻了半天api最后换了$watch()方法,才搞定这个需求,我梳理了方法如下,$watch()监听某个值(双向绑定)的变化,一旦发生变化,就调用引号里的方法,从而达到change事件监听的效果!!

示例代码

var v_assetManage_controller = new Vue({ 
 el: '.LSee-index', 
 data: { 
  trendQueryTimeCtr: { 
   startTime: '', 
   endTime: '' 
  } 
 }, 
 ready: function() { 
  // 
 }, 
 methods: { 
  queryTrendData: function(){ 
   //do some here 
  } 
 }, 
 watch: { 
  'trendQueryTimeCtr.startTime': 'queryTrendData', 
  'trendQueryTimeCtr.endTime': 'queryTrendData' 
 } 
 
});

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用vue.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
js querySelector() 使用方法
Dec 21 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 #Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
JS中SetTimeout和SetInterval使用初探
Mar 23 #Javascript
深入学习 JavaScript中的函数调用
Mar 23 #Javascript
js中toString()和String()区别详解
Mar 23 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python中as用法实例分析
2015/04/30 Python
Python入门之modf()方法的使用
2015/05/15 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
创业计划书中要认真思考的问题
2013/12/28 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书