一篇文章教你簡單使用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)文章
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)出頁面為PDF格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問題
這篇文章主要介紹了關(guān)于el-form表單驗(yàn)證中的validator與validate使用時(shí)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue中el-table和jsplumb實(shí)現(xiàn)連線功能
本文主要介紹了el-table和jsplumb實(shí)現(xiàn)連線功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue+elementUI實(shí)現(xiàn)簡單日歷功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)簡單日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue-cli3 $ is not defined錯(cuò)誤問題及解決
這篇文章主要介紹了Vue-cli3 $ is not defined錯(cuò)誤問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了自定義vue組件發(fā)布到npm的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue 監(jiān)聽元素前后變化值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
最近在做一個(gè)類似課程表的需求,需要自制一個(gè)日歷來支持功能及展現(xiàn),就順便研究一下應(yīng)該怎么開發(fā)日歷組件,下面這篇文章主要給大家介紹了關(guān)于如何基于vue2實(shí)現(xiàn)一個(gè)日歷組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實(shí)現(xiàn)方法及其錯(cuò)誤的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12