1. 程式人生 > >vue之watch用法

vue之watch用法

example method cli $watch def pyc 技術 實例 ner

對應一個對象,鍵是觀察表達式,值是對應回調。值也可以是方法名,或者是對象,包含選項。在實例化時為每個鍵調用 $watch() ;

技術分享
//使用官方vue-cli腳手架書寫
<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>
技術分享

vue之watch用法