vue.js中$watch的用法示例
前言
vue.js是一個(gè)數(shù)據(jù)驅(qū)動(dòng)的web界面庫(kù)。Vue.js只聚焦于視圖層,可以很容易的和其他庫(kù)整合。代碼壓縮后只有24kb
Vue.js 提供了一個(gè)方法 watch
,它用于觀(guān)察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。對(duì)應(yīng)一個(gè)對(duì)象,鍵是觀(guān)察表達(dá)式,值是對(duì)應(yīng)回調(diào)。值也可以是方法名,或者是對(duì)象,包含選項(xiàng)。
在實(shí)例化時(shí)為每個(gè)鍵調(diào)用 $watch() ;
<template> //觀(guān)察數(shù)據(jù)為字符串或數(shù)組 <input v-model="example0"/> <input v-model="example1"/> /當(dāng)單觀(guān)察數(shù)據(jù)examples2為對(duì)象時(shí),如果鍵值發(fā)生變化,為了監(jiān)聽(tīng)到數(shù)據(jù)變化,需要添加deep:true參數(shù) <input v-model="example2.inner0"/> </template> <script> export default { data(){ return { example0:"", example1:"", example2:{ inner0:1, innner1:2 } } }, watch:{ example0(curVal,oldVal){ console.log(curVal,oldVal); }, example1:'a',//值可以為methods的方法名 example2:{ //注意:當(dāng)觀(guān)察的數(shù)據(jù)為對(duì)象或數(shù)組時(shí),curVal和oldVal是相等的,因?yàn)檫@兩個(gè)形參指向的是同一個(gè)數(shù)據(jù)對(duì)象 handler(curVal,oldVal){ conosle.log(curVal,oldVal) }, deep:true } }, methods:{ a(curVal,oldVal){ conosle.log(curVal,oldVal) } } } </script>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)的大家可以留言交流。
相關(guān)文章
使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能
這篇文章主要介紹了使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vue3利用keepAlive緩存頁(yè)面實(shí)例詳解
<keep-alive> 是一個(gè)抽象組件,它自身不會(huì)渲染一個(gè)DOM元素,也不會(huì)出現(xiàn)在組件的父組件鏈中,下面這篇文章主要給大家介紹了關(guān)于vue3利用keepAlive緩存頁(yè)面的相關(guān)資料,需要的朋友可以參考下2022-11-11vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作
這篇文章主要介紹了vue項(xiàng)目中js-cookie的使用存儲(chǔ)token操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫(xiě)后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢(xún),下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04Vue中使用正則表達(dá)式進(jìn)行文本匹配和處理的方法小結(jié)
正則表達(dá)式在Vue中具有廣泛的應(yīng)用場(chǎng)景,包括文本匹配和處理、表單驗(yàn)證等,通過(guò)本文的介紹和示例,希望讀者能更好地理解和應(yīng)用正則表達(dá)式在Vue中的使用方法,感興趣的朋友一起看看吧2023-11-11vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件
這篇文章主要介紹了vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件,幫助大家開(kāi)發(fā)Web應(yīng)用程序,完成需求,感興趣的朋友可以了解下2020-10-10vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11