溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在Vue中使用watch方法監聽數據，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>監聽方法watch的使用</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="root"></div> <script> var vm = new Vue({ el: "#root", data: { obj: {name: "zhaoolee", age: 12} , tel:6666666}, template: `<div><div>姓名: {{obj.name}}</div> <div>電話: {{tel}}</div> <input type="text" v-model="obj.name"> <input type="text" v-model="tel"></div>`, watch: { obj: { handler(){ console.log("obj被改變"); }, // 頁面加載之初先執行一次handle immediate: true, // 深度檢查屬性,即使對象內部的屬性值改變, 也能檢測到(比較消耗性能) deep: true }, "obj.name": { handler(){ console.log("=>obj.name被改變"); } }, tel:{ handler(){ console.log("tel被改變"); } } } }) </script> </body> </html>
對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。在實例化時為每個鍵調用 $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方法監聽數據就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
