vue.js中$watch的用法示例

更新時間：2016年10月04日 16:31:21 作者：杜培東

這篇文章為大家詳細介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友們可以一起看看吧。

前言

vue.js是一個數(shù)據(jù)驅(qū)動的web界面庫。Vue.js只聚焦于視圖層，可以很容易的和其他庫整合。代碼壓縮后只有24kb

Vue.js 提供了一個方法 watch，它用于觀察Vue實例上的數(shù)據(jù)變動。對應一個對象，鍵是觀察表達式，值是對應回調(diào)。值也可以是方法名，或者是對象，包含選項。

在實例化時為每個鍵調(diào)用 $watch() ;

<template>
　　//觀察數(shù)據(jù)為字符串或數(shù)組
　　 <input v-model="example0"/>
　　 <input v-model="example1"/>
　　/當單觀察數(shù)據(jù)examples2為對象時，如果鍵值發(fā)生變化，為了監(jiān)聽到數(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:{
　　　　　　　　　//注意：當觀察的數(shù)據(jù)為對象或數(shù)組時，curVal和oldVal是相等的，因為這兩個形參指向的是同一個數(shù)據(jù)對象
　　　　　　　　　　handler(curVal,oldVal){
　　　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　　　},
　　　　　　　　　　deep:true
　　　　　　　　}
　　　　　　},
　　　　　　methods:{
　　　　　　　　a(curVal,oldVal){
　　　　　　　　　　conosle.log(curVal,oldVal)
　　　　　　　　}
　　　　　　}
  }
</script>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問的大家可以留言交流。

您可能感興趣的文章: