vue watch

by ysuper

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">

  <pre>old_msg: {{ old_msg }}</pre>
  <pre>new_msg: {{ new_msg }}</pre>
  
  <p>
    輸入內容 <input v-model="new_msg">
  </p>

</div>

JavaScript

const vm = Vue.createApp({
  data () {
    return {
      old_msg: 'Hello Vue.js!',
      new_msg: 'Hello Vue.js!'
    } 
  },
  watch: {
    // 當 this.msg 被更新時觸發
    new_msg (val, oldValue) {
 			this.old_msg = `${oldValue}`
      this.new_msg = `${val}`
//      console.log(`新的 msg: ${val}`);
//      console.log(`舊的 msg: ${oldValue}`);
    }
  }
}).mount('#app');