Vue.js - Watch

Vue.js 的 watch 可以設定監控特定的屬性,當屬性值變動時做對應的處理。


使用上只要在建構 Vue 建立時設定 watch 物件,裡面放置屬性值變化時要做的處理即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id = "app">
...
<input v-model = "<PropertyName>">
...
</div>
<script>
new Vue({
el : '#app' ,
data :{
...
},
watch: {
<PropertyName>: function (val) {
...
}
}
})
</script>


像是下面這樣的程式,設定了 message 變動時將訊息寫入 console 內。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
<head>
<title> Vue - Hello World </title>
<script src = "https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id = "app">
<input v-model = "message">
<p> {{message}} </p>
</div>
<script>
new Vue({
el : '#app' ,
data :{
message : ""
},
watch: {
message: function (val) {
console.log(val)
}
}
})
</script>
</body>
</html>


運行起來當輸入框的輸入值變動,會連帶變動輸入框繫結的 message 屬性,然後因為監控到了 message 屬性值的變動,所以會將屬性值輸出到 console。