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 相关文章推荐
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
js取整数、取余数的方法
May 11 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
JS+Canvas实现五子棋游戏
Aug 26 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类
2006/11/25 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Python面向对象进阶学习
2019/05/21 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
餐厅总厨求职信
2014/03/04 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书