溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue.Js中的$watch()方法總結

發(fā)布時間：2020-09-24 11:28:12 來源：腳本之家 閱讀：141 作者：lemon678 欄目：web開發(fā)

前言

最近公司用vue框架寫交互，之前沒怎么寫過，但是很多數(shù)據(jù)雙向綁定的東東跟angular很像！所以上手很快！哈哈

今天就碰到一個vue的問題?。?！產(chǎn)品需求是，datetimepick時間選擇器一更改時間，就重新ajax獲取數(shù)據(jù)渲染圖表，很簡單的需求?。∮胊ngula ng-change監(jiān)聽inpu框框，分分鐘搞定??！用特么js原生 on-change也分分鐘搞定啊！問題是尼瑪?shù)腣ueJs對input框沒有change事件！尼瑪坑爹啊?。ú恢朗遣皇俏覜]找到，反正api里沒有，goole了半天，也沒有，要是有的話，麻煩留言告訴我，謝謝?。。?br />

翻了半天api最后換了$watch()方法，才搞定這個需求，我梳理了方法如下，$watch()監(jiān)聽某個值（雙向綁定）的變化，一旦發(fā)生變化，就調(diào)用引號里的方法，從而達到change事件監(jiān)聽的效果??！

示例代碼

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' 
 } 
 
});

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學習或者使用vue.js能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手