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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
javascript使用call调用微信API
Dec 15 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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 传值赋值与引用赋值的区别
2010/12/29 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jqTransform美化表单
2015/10/10 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
对numpy中array和asarray的区别详解
2018/04/17 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
投标单位介绍信
2014/01/09 职场文书
工作违纪检讨书
2014/02/17 职场文书
公益广告宣传方案
2014/02/28 职场文书
项目建议书格式
2014/03/12 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
汽修专业自荐信
2014/07/07 职场文书
检讨书范文2000字
2015/01/28 职场文书
旗帜观后感
2015/06/08 职场文书
自信主题班会
2015/08/14 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python