前言
vue.js是一個數據驅動的web界面庫。Vue.js只聚焦於視圖層,可以很容易的和其他庫整合。代碼壓縮後只有24kb
Vue.js 提供了一個方法 watch
,它用於觀察Vue實例上的數據變動。對應一個對象,鍵是觀察表達式,值是對應回調。值也可以是方法名,或者是對象,包含選項。
在實例化時為每個鍵調用 $watch() ;
<template> //觀察數據為字符串或數組 <input v-model="example0"/> <input v-model="example1"/> /當單觀察數據examples2為對象時,如果鍵值發生變化,為了監聽到數據變化,需要添加deep:true參數 <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:{ //注意:當觀察的數據為對象或數組時,curVal和oldVal是相等的,因為這兩個形參指向的是同一個數據對象 handler(curVal,oldVal){ conosle.log(curVal,oldVal) }, deep:true } }, methods:{ a(curVal,oldVal){ conosle.log(curVal,oldVal) } } } </script>
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問的大家可以留言交流。