2021-04-14

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

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

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: ture
    };
  },
};
</script>

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

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

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

v-bindの省略記法

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

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

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

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

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

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

<script>
export default {
  data() {
    return {
      isActive: ture
    };
  },
};
</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: ture,
      sampleNum: 1
    };
  },
};
</script>

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

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