Template から参照できる変数

export default するオブジェクトには Vue component の各種設定を書くことはすでに説明しました。

特に data, computed, methods 等、template から参照できる変数について今回は説明します。

template から参照できる変数は、この export default {} の中で定義したものに限られます。

下記の例であれば以下のものがあります。

  • number (data の中)
  • double, numberClass (computed の中)
  • add (methods の中)

これらは template から参照して、View(平たく言えば DOM) へと bind(紐づける) ことができます。

template で参照できる変数
<template>
  <div id="app">
    <h2 :class="numberClass">{{ number }} {{ double }}</h2>
    <button @click="add(1);">+1</button> <button @click="add(10);">+10</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    };
  },
  computed: {
    double() {
      return this.number * 2;
    },
    numberClass() {
      if (this.number > 50) {
        return "red";
      }

      return "blue";
    }
  },
  methods: {
    add(val) {
      this.number = this.number + val;
    }
  }
};
</script>

<style>
#app {
  font-size: 30px;
}

.blue {
  background: blue;
}

.red {
  background: red;
}
</style>

View に bind する方法

Template から参照できる変数を、View に Bind する方法はいくつかあります。

  • テキストとしてバインドする場合は {{}} を使う
  • ユーザーイベント (ユーザー操作) に対してバインドする場合は @event 名（他にも @input @change 等がある）
  • 属性 (attribute) に紐づける場合は、:属性名 を使う
バインドする
<template>
  <div id="app">
    <h2 :class="numberClass">{{ number }} {{ double }}</h2>
    <button @click="add(1);">+1</button> <button @click="add(10);">+10</button>
  </div>
</template>

他の書き方

参考コード

  • @event は v-on:event と同じ
  • :name は v-bind:name と同じ
他の書き方
<template>
  <div id="app">
    <h2 :class="numberClass">{{ number }} {{ double }}</h2>
    <h2 v-bind:class="numberClass">{{ number }} {{ double }}</h2>
    <button @click="add(1);">+1</button> <button @click="add(10);">+10</button>
    <button v-on:click="add(1);">+1</button>
    <button v-on:click="add(10);">+10</button>
  </div>
</template>