VueJs $watch()方法总结!!

最近公司用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中,$watch是一个实例方法,用于观察Vue实例中的数据变化。根据引用,如果使用Vue3,可以使用键路径来观察数据的变化。例如,在created钩子函数中使用键路径来观察c.d的变化。当c.d的值发生变化时,回调函数将被触发。 在Vue2中,可以使用命令式的$watch API来观察数据的变化,就像引用中所述。可以使用watch选项或者composition API中的watch来进行多个数据源的同时观察。使用数组来同时侦听多个源,当观察的数据发生变化时,回调函数将被执行。 根据引用中对$watch方法的解释,$watch用于观察Vue实例中的表达式或计算属性函数的变化。回调函数会接收到新值和旧值作为参数。对于简单的键路径,可以直接使用表达式进行观察。对于更复杂的表达式,可以使用一个函数来观察。当表达式或计算属性发生变化时,回调函数将被触发。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [理解vue中$watch使用](https://blog.csdn.net/wu_xianqiang/article/details/110265274)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [深入对Vue.js $watch方法的理解](https://download.csdn.net/download/weixin_38606656/13621496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值