Vue.js 入門 - エンジニアが解説する v-bind 基礎

Vue.js を初めて使う方に向けて、今回は Vue.js で追加された独自の HTML 記法について解説します。

結論

• mustache タグ ({{ }}) で script 内の変数を HTML に出力できる
• v-bind は属性に対して動的な処理を加えるディレクティブ
• : プレフィックスで v-bind: を省略可能
• 配列記法を使えば複数の class / style を同時に適用できる

mustache タグ

script 内で定義した変数や関数を HTML 上で使用したい時に mustache タグが使えます。

mustache タグは {{ }} を HTML 上に記述すると使用できます。

以下のコードは displayText を script 内で定義し、HTML で呼び出しています。

実際に実行すると 文字列です。 と表示されます。

<template>
  {{ displayText }}
</template>

<script>
export default {
  data() {
    return {
      displayText: '文字列です。'
    };
  },
};
</script>

これが最もシンプルな記法です。

上記例は文字列の変数ですが、オブジェクト型の変数でも、もちろん使用できます。

<template>
  {{ displayObj }}
</template>

<script>
export default {
  data() {
    return {
      displayObj: {
        text: '文字列です。'
      }
    };
  },
};
</script>

注意したいのは、上記コードを実行すると { text: '文字列です。' } と表示される点です。

文字列です。 と表示したい場合は、displayObj.text と記述しましょう。

v-bind

今回の記事で最も大事なのが v-bind です。

v-bind は属性に対して動的な処理を簡単に加えられます。

特に class は動的に変えることでページに表現を大幅に加えられるのでよく使用します。

v-bind の基本的な使い方

以下のコードは activeClass というクラスを isActive の真偽値で適用するかどうか判定しています。

実際に実行すると文字色が白い 文字列です。 が表示されます。

<template>
  <div v-bind:class="{ activeClass: isActive }">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
};
</script>

<style lang="css">
  .activeClass {
    color: #fff;
  }
</style>

script 内のコードで isActive を定義し、HTML の v-bind:class 内で判定しています。

今回のコードは isActive が true になっているので、false にすると黒文字で表示されます。

v-bind の省略記法

v-bind は省略記法ができます。

記述方法は : を属性の先頭に書くと v-bind が適用されます。

以下のコードは activeClass というクラスを isActive の真偽値で適用するかどうか判定しています。

実際に実行すると黒文字で 文字列です。 が表示されます。

なぜ黒文字なのかは、属性内の判定で ! の not 処理をしているからです。

<template>
  <div :class="{ activeClass: !isActive }">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
};
</script>

<style lang="css">
  .activeClass {
    color: #fff;
  }
</style>

複数の v-bind

属性で 2 つ以上の v-bind をしたい場合、class 内を配列で記述すると複数設定できます。

以下のコードは activeClass と sampleClass の両方のクラスが適用されます。

実際に実行すると白文字で 文字列です。 が表示されます。

<template>
  <div :class="[{ activeClass: isActive }, { sampleClass: sampleNum === 1 }]">
    サンプルです。
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      sampleNum: 1
    };
  },
};
</script>

<style lang="css">
  .activeClass {
    color: #fff;
  }

  .sampleClass {
    width: 100%;
  }
</style>

class は他と同じく通常の判定処理ができるので、比較演算子も使用できます。

基本的に v-bind は全ての属性に適用できます。 しかし使用頻度が高いのは class、style、src です。

まとめ

今回は Vue.js の mustache タグと v-bind を紹介しました。

Vue.js の基礎中の基礎なのでしっかりマスターしましょう。

関連記事:

• Vue.js 入門 - Vue の基礎
• Vue.js 入門 - コンポーネント