属性のバインディング

5 分

ハンドルバー ({{}}) を使用してデータをページに表示する方法については既に確認しました。しかし、動的にする必要がある部分は、ページ上のテキストだけではありません。

ページ上の多くの値を設定するには、属性を使用します。幸い、Vue.js を使用すると、ディレクティブを使用して属性にバインドすることができます。

ディレクティブ

ディレクティブは、Vue.js が認識する属性です。これを使用すると、HTML 属性の値を動的に設定できます。すべてのディレクティブは、v- から始まります。

v-bind

コアディレクティブは、v-bind です。これを使用することにより、データ値を属性にバインドできます。これを使用すると、クラスの名前、画像のソース、またはスタイルを動的に設定できます。

ディレクティブを使用するには、設定する属性の前に、v-bind とコロン (:) を配置します。したがって、画像の src を設定するには、v-bind:src="value" を使用します。属性値は、{{ }} 構文を使用する際の評価方法と同様に評価されます。

次のコードは、HTML 要素 <img src="./media/sample.jpg"> を生成します。

<div id="app">
    <img v-bind:src="imageSource" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imageSource: './media/sample.jpg'
            }
        }
    }).mount('#app');
</script>

imageSource プロパティは、data() から返されるため、テンプレートで使用することができます。その後、画像要素の src 属性にバインドされます。

Note

アプリに使用するオブジェクトへの参照を保持する必要はありません。ただし、前に確認したとおり、すぐに createApp を呼び出し、その後に mount を呼び出すことができます。

バインディングの簡略化

Vue アプリで v-bind ディレクティブを使用してデータを属性にバインドする方法を確認しました。このディレクティブを短縮形で入力することもできます。たとえば、「v-bind:attribute」と入力する代わりに、「:attribute」と入力することができます。このように短縮することにより、数文字を省略することができます。

バインドされた画像ソースの例では、次の方法で短縮形を使用できます。

<div id="app">
    <img v-bind:src="imageSource" />
</div>

ここで、次のコードを入力できます。

<div id="app">
    <img :src="imageSource" />
</div>

ヒント

通常、v-bind:attribute を使用するよりも短縮形 :attribute を使用する方が効率的であると考えられます。

クラスとスタイル

HTML 要素に設定する最も一般的な属性の 1 つは、その class または style です。これらの属性にバインドするには、v-bind:class および v-bind:style を使用できます。または、短縮形の :class および :style を使用できます。

クラスオブジェクト

2 つのクラス centered と active を使用するアプリケーションがあるとしましょう。 HTML でこれらのクラスを使用する方法を次に示します。

<div class='centered active'>Hello, Vue!</div>

ただし、この例は静的です。データを変更する機能が必要な場合、バインディングを使用できます。 Vue では、文字列だけでなく、オブジェクトに対してもバインディングを使用できます。

別のプロパティの静的な値 centered active を切り替える方法を次に示します。

<div id="app">
    <div :class="classObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                classObject: {
                    centered: true,
                    active: true
                }
            }
        }
    }).mount('#app');
</script>

データプロパティ classObject には、値がブール値である 2 つのプロパティがあります。ブール値を使用すると、特定のクラスを "有効" または "無効" にすることができます。 centered を false に設定すると、active が唯一のプロパティであり、まだ true のままであるため、<div class="active"> がレンダリングされます。

Note

クラスオブジェクトには、JavaScript の名前付けルールが適用されます。このため、クラス名 (たとえば、center-text) でダッシュを使用する場合、プロパティを追加するときに名前を引用符で囲みます ('center-text': true)。

スタイルオブジェクト

CSS でスタイルを設定するには、キーと値のペアのコレクションを作成する必要があります。スタイルは、JavaScript オブジェクトを使用して表すのが比較的自然です。 Vue.js では、スタイルオブジェクトを作成してスタイルを設定できます。

たとえば、HTML 要素のスタイルの背景色 (background-color) を設定するには、次のコードを使用できます。

<div id="app">
    <div :style="styleObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                styleObject: {
                    'background-color': 'red'
                }
            }
        }
    }).mount('#app');
</script>