vue.js中$watch的用法樣本

標籤：watch   資料   logs   handle   bsp   inner   size   對象   16px   

Vue.js 提供了一個方法 watch，它用於觀察Vue執行個體上的資料變動。對應一個對象，鍵是觀察運算式，值是對應回調。值也可以是方法名，或者是對象，包含選項。

在執行個體化時為每個鍵調用 $watch() ;

 1 <template> 2 　　//觀察資料為字串或數組 3 　　 <input v-model="example0"/> 4 　　 <input v-model="example1"/> 5 　　/當單觀察資料examples2為對象時，如果索引值發生變化，為了監聽到資料變化，需要添加deep:true參數 6 　　 <input v-model="example2.inner0"/> 7 </template> 8 <script> 9 　　 export default {10 　　　　　　data(){11 　　　　　　　　return {12 　　　　　　　　　　example0:"",13 　　　　　　　　　　example1:"",14 　　　　　　　　　　example2:{15 　　　　　　　　　　　　inner0:1,16 　　　　　　　　　　　　innner1:217 　　　　　　　　　　}18 　　　　　　　　}19 　　　　　　},20 　　　　　　watch:{21 　　　　　　　　example0(curVal,oldVal){22 　　　　　　　　　　console.log(curVal,oldVal);23 　　　　　　　　},24 　　　　　　　　example1:‘a‘，//值可以為methods的方法名25 　　　　　　　　example2:{26 　　　　　　　　　//注意：當觀察的資料為對象或數組時，curVal和oldVal是相等的，因為這兩個形參指向的是同一個資料對象27 　　　　　　　　　　handler(curVal,oldVal){28 　　　　　　　　　　　　conosle.log(curVal,oldVal)29 　　　　　　　　　　},30 　　　　　　　　　　deep:true31 　　　　　　　　}32 　　　　　　},33 　　　　　　methods:{34 　　　　　　　　a(curVal,oldVal){35 　　　　　　　　　　conosle.log(curVal,oldVal)36 　　　　　　　　}37 　　　　　　}38   }39 </script>

 

vue.js中$watch的用法樣本