vue.jsでwatchを使ってみる

2021年1月4日

vue.jsでwatchを使ってみる

watchを使用するとプロパティ値を監視し、そのプロパティ値に変化があったときに関数を実行することが出来ます。

書式


watch: { 監視したいプロパティ名: 関数オブジェクト }

プログラム


<!DOCTYPE html>
<html>

<head>
  <title>sample</title>
  <meta http-equiv="content-type" charset="utf-8">
</head>

<body>
  <div id="app">
    <div>
      <span>クリック回数：{{ count }}</span>
      <button v-on:click="addCount">CLICK!</button>
    </div>
    <div>
      {{ message }}
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css">
</body>

</html>

【JS】


var app = new Vue({
  el: '#app',
  data: {
    count: 0,
    message: 'ボタンをクリックしてください。'
  },
  methods: {
    addCount: function () {
      this.count++;
    }
  },
  watch: {
    count: function (newCount, oldCount) {
      this.message = 'カウントが' + oldCount + 'から' + newCount + 'に変わりました。'
    }
  }
});

【実行結果】

YouTube