【Vue.js】双方向データバインディング(v-model)・computed・watch

Vue.jsの基本的な使い方を以前の記事で紹介しました。

本日は、Vue.jsの便利な機能を紹介します。

解説していく機能は

双方向データバインディング(v-model)
computed
watch
Class制御

の４つ。

すべて、Vue.jsでwebアプリを作る際に必須の機能ですので、１つでも「なんだそれ？」の人は必ずマスターしてください！

合計するだけの簡易アプリ

このような、左のinputと右のinputの数字の合計を表示するwebアプリを使って、Vue.jsの便利機能を紹介します。

<div id="app">
  <input type="number" v-model="number_01">
  <input type="number" v-model="number_02">
  <div :class="{isActive: isActive}">{{ sum }}</div>
  <button @click="isActive = !isActive">赤くする</button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      number_01: 0,
      number_02: 0,
      isActive: false
    },
    computed: {
      sum() {
        return Number(this.number_01)+ Number(this.number_02);
      }
    },
    watch: {
      number_01(value) {
        console.log("number_01 is " + value);
      },
      number_02(value) {
        console.log("number_02 is " + value);
      },
    }
  })
</script>
<style>
  .isActive {
    color: red;
  }
</style>

</div>

new Vue({

el: "#app",

data: {

number_01: 0,

number_02: 0,

isActive: false

computed: {

sum() {

return Number(this.number_01)+ Number(this.number_02);

}

watch: {

number_01(value) {

console.log("number_01 is " + value);

number_02(value) {

console.log("number_02 is " + value);

}

})

</script>

<style>

.isActive {

color: red;

}

</style>

これが今回紹介する機能がすべて詰め込まれたソース一式。

かなりシンプルな形になっています。(もし、複雑だ！と思っても、少しずつ解説していくのでご安心を。)

双方向データバインディング(v-model)

<div id="app">
  <input type="number" v-model="number_01">
  <input type="number" v-model="number_02">
  ...
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      number_01: 0,
      number_02: 0,
     ....
    },
    ....
  })
</script>

...

</div>

new Vue({

el: "#app",

data: {

number_01: 0,

number_02: 0,

....

})

</script>

まずは、この部分。双方向データバインディング(v-model)について解説します。

Vue.jsなどのデータバインディング系のフレームワークはwebアプリ内で使用したい値をjs側で管理しています。今回で言うと、左側のinputでカウントする数字(number_01)と右側のinputでカウントする数字(number_02)をVue.jsのdataで管理しています。

管理している値(data)をjsのメソッドで変更しても、htmlのinputで変更しても同じようにdataの値を変更する機能が双方向データバインディング(v-model)です。

今回の例で言うと、number_01とnumber_02はVue.jsがインスタンス化された段階では共に「0」の値です。その値がHTMLのinputに反映されます。そして、HTMLのinputの値を変更すると「v-model=”number_01″」のようにバインディングされた値を今度はHTMLの方から変更することができます。

これが双方向データバインディング(v-model)の基本的な使い方で、webアプリを作成するときには非常によく使う手法ですので、必ずマスターしてください。

computed

<div id="app">
  <div>{{ sum }}</div>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      number_01: 0,
      number_02: 0
    },
    computed: {
      sum() {
        return Number(this.number_01)+ Number(this.number_02);
      }
    }
    ....
  })
</script>

</div>

new Vue({

el: "#app",

data: {

number_01: 0,

number_02: 0

computed: {

sum() {

return Number(this.number_01)+ Number(this.number_02);

}

....

})

</script>

computedという機能を使えば、dataで保持している値に変更がある度に、それを利用した値をリアルタイムに生成できます。

今回でいうと、computedの中の「sum()」はnumber_01とnumber_02の合計値をリターンしています。そのため、もし、上記で説明した双方向データバインディング(v-model)の機能によって、number_01もしくはnumber_02の値が変更されたら、即座に再計算して新たな値をリターンします。

watch

<div id="app">
  <input type="number" v-model="number_01">
  <input type="number" v-model="number_02">
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      number_01: 0,
      number_02: 0
    ...
    },
    ...
    watch: {
      number_01(value) {
        console.log("number_01 is " + value);
      },
      number_02(value) {
        console.log("number_02 is " + value);
      },
    }
  })
</script>

</div>

new Vue({

el: "#app",

data: {

number_01: 0,

number_02: 0

...

watch: {

number_01(value) {

console.log("number_01 is " + value);

number_02(value) {

console.log("number_02 is " + value);

}

})

</script>

先程紹介した「computed」に似ているのですが、watchという機能を紹介します。

watchは、dataで保有している値に１対１で対応して、その値が変更されたときに動作するメソッドのようなものです。

今回の例で言うと、watchの中でnumber_01とnumber_02を監視するように登録していて、それらの値が変更されたら、console.logで値をlogに表示するようになっています。

Class制御

<div id="app">
  ...
  <div :class="{isActive: isActive}">{{ sum }}</div>
  <button @click="isActive = !isActive">赤くする</button>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
     ....
      isActive: false
    }
　　　　....
  })
</script>

...

</div>

new Vue({

el: "#app",

data: {

....

isActive: false

}

　　　　....

})

</script>

フロントエンドのお仕事では、jsでDOMのクラスを付け替えることは頻繁に発生します。

Vue.jsには、Classの付け替えに便利な機能が標準で組み込まれていて、「:class={…}」という形で実装します。

今回の例で言うと、「<button @click=”isActive = !isActive”>赤くする</button>」をクリックするとdataで保有しているisActiveのbool値が反転して、trueの場合、「<div :class=”{isActive: isActive}”>{{ sum }}</div>」にisActiveというClassが付与されるようになっています。

isActiveというClass名にCSSで色をつけておき、クリックでisActiveのデータを変更すれば、それに合わせて色を変更する動きを実装することができます。