Vue.js - Watch

May 12, 2017

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

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


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

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


<!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。

Vue.js