一篇文章教你簡(jiǎn)單使用Vue的watch偵聽器
更新時(shí)間：2021年12月08日 15:51:44 作者：wait......
這篇文章主要為大家介紹了Vue watch偵聽器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
偵聽器watch?
- 函數(shù)名就是要偵聽的元素的名字
- 傳入的參數(shù)第一個(gè)是變化后的新值newval，第二個(gè)是變化前的舊值oldval?
格式
方法格式的偵聽器
- 無法在剛進(jìn)入頁面時(shí)自動(dòng)觸發(fā)，只有在偵聽到變化才會(huì)觸發(fā)
- 如果偵聽的是對(duì)象，當(dāng)對(duì)象的屬性發(fā)生變化時(shí)，不會(huì)偵聽到
對(duì)象格式的偵聽器
- 通過immediate選項(xiàng)，可以讓偵聽器自動(dòng)觸發(fā)
- 通過deep選項(xiàng)，使偵聽器深度偵聽到對(duì)象中屬性的變化
這是Vue實(shí)例中的data對(duì)象：
設(shè)置偵聽器：
下面分別是方法格式的偵聽器和對(duì)象格式的偵聽器：
方法格式的偵聽器實(shí)現(xiàn)的是，當(dāng)input中內(nèi)容變化時(shí)，觸發(fā)偵聽，偵聽input中的內(nèi)容（內(nèi)容是與tem綁定好的），如果當(dāng)前input中的內(nèi)容不在already數(shù)組中，就添加到already中，否則彈出提示框該名稱已存在
對(duì)象格式的偵聽器實(shí)現(xiàn)的是，頁面一旦載入就立即觸發(fā)偵聽，偵聽foo對(duì)象name屬性的變化。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
您可能感興趣的文章:
相關(guān)文章
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Vue?axios和vue-axios的關(guān)系及使用區(qū)別
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios, axios)，本文給大家介紹Vue?axios和vue-axios關(guān)系，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案
v-for標(biāo)簽可以用來遍歷數(shù)組，將數(shù)組的每一個(gè)值綁定到相應(yīng)的視圖元素中去，下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯(cuò)的三個(gè)方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
如何修改element-ui中tree組件的icon圖標(biāo)(小白都會(huì)的前端技能)
這篇文章主要給大家介紹了關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的相關(guān)資料,本文介紹的是小白都會(huì)的前端技能,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
本篇文章主要介紹了詳解Vue整合axios的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
本文將詳細(xì)介紹前端性能優(yōu)化的7大手段，包括減少請(qǐng)求數(shù)量、減小資源大小、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載、減少重繪回流、使用性能更好的API和構(gòu)建優(yōu)化2020-02-02