Vue使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例
正文
開(kāi)發(fā)環(huán)境 vue2
電腦系統(tǒng) windows11專業(yè)版
在使用vue開(kāi)發(fā)的過(guò)程中,我們有時(shí)候需要使用到監(jiān)聽(tīng)watch來(lái)獲取對(duì)應(yīng)的數(shù)據(jù),接下來(lái)讓我們看一下使用方法和同時(shí)監(jiān)聽(tīng)多個(gè)值的
使用方法
廢話不多說(shuō),直接上代碼:
watch:{
"tempUrl"(newValue,oldValue){
console.log("我是監(jiān)聽(tīng)的新數(shù)據(jù)",newValue);
console.log("我是監(jiān)聽(tīng)的舊數(shù)據(jù)",oldValue);
}
}
這種寫(xiě)法能監(jiān)聽(tīng)多數(shù)據(jù)的變化,現(xiàn)在感覺(jué)是沒(méi)有問(wèn)題的
//當(dāng)我需要監(jiān)聽(tīng)多個(gè)值變化的時(shí)候
watch:{
"tempUrl"(newValue,oldValue){
console.log("我是監(jiān)聽(tīng)的新數(shù)據(jù)",newValue);
console.log("我是監(jiān)聽(tīng)的舊數(shù)據(jù)",oldValue);
},
"tagNameLists"(newValue,oldValue){
console.log("我是視頻標(biāo)簽顯示新數(shù)據(jù)",newValue);
console.log("我是視頻標(biāo)簽顯示舊數(shù)據(jù)",oldValue);
// this.getRdata(newValue);
}
}
//只觸發(fā)了第一個(gè)監(jiān)聽(tīng)的數(shù)據(jù)變化,第二個(gè)數(shù)據(jù)變化沒(méi)有監(jiān)聽(tīng)多,怎么解決呢?
使用computed
computed:{
dataChange () {
const {tempUrl, tagNameLists} = this;
return {tempUrl, tagNameLists};
}
}watch:{
dataChange:{
handler(newValue,oldValue) {
console.log("監(jiān)聽(tīng)到了數(shù)據(jù)的變化",newValue);
},
deep: true
}
},
這樣就實(shí)現(xiàn)了監(jiān)聽(tīng)多個(gè)數(shù)據(jù)變化
本期的分享到了這里就結(jié)束啦,希望對(duì)你有所幫助,讓我們一起努力走向巔峰。
以上就是Vue使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例的詳細(xì)內(nèi)容，更多關(guān)于Vue中 watch監(jiān)聽(tīng)多值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用Element ui Table組件動(dòng)態(tài)控制列的顯示隱藏方式
這篇文章主要介紹了使用Element ui Table組件動(dòng)態(tài)控制列的顯示隱藏方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
vue2項(xiàng)目增加eslint配置代碼規(guī)范示例
這篇文章主要為大家介紹了vue2項(xiàng)目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
這篇文章主要介紹了vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue使用html2canvas和jspdf將html轉(zhuǎn)成pdf
在前端開(kāi)發(fā)中, html轉(zhuǎn)pdf是最常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于vue如何使用html2canvas和jspdf將html轉(zhuǎn)成pdf的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue監(jiān)聽(tīng)滾動(dòng)事件的方法
這篇文章主要介紹了vue監(jiān)聽(tīng)滾動(dòng)事件的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue項(xiàng)目中常見(jiàn)的三種文件類型在線預(yù)覽實(shí)現(xiàn)(pdf/word/excel表格)
最近在項(xiàng)目中要做一個(gè)pdf在線預(yù)覽的功能,索性給大家整理個(gè)全面的,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常見(jiàn)的三種文件類型在線預(yù)覽實(shí)現(xiàn)的相關(guān)資料,文件類型分別是pdf/word文件/excel表格,需要的朋友可以參考下2022-05-05
vue $attrs和$listeners的使用與區(qū)別
本文主要介紹了vue $attrs和$listeners的使用與區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
vue使用WEB自帶TTS實(shí)現(xiàn)語(yǔ)音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實(shí)現(xiàn)語(yǔ)音文字互轉(zhuǎn),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套u(yù)i組件庫(kù)，目前最新版本 react 和 vue 等主流框架都有支持。該庫(kù)默認(rèn)主題色是天藍(lán)色，若用于項(xiàng)目開(kāi)發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下2023-12-12