【Vue.js入門】v-bindをなるべくわかるように説明

こんにちは、コンスキです。

前回は、v-ifとv-showディレクティブについて説明しました。

今回は要素の属性値を一方向バインディングするためのディレクティブを説明します。

v-bindディレクティブとは？
V-bindディレクティブの使い方
- class属性とstyle属性の属性値の書き方
style属性にv-bindを使ったサンプルプログラム
まとめ

v-bindディレクティブとは？

v-bindディレクティブとは、dataプロパティなどに設定した値を要素の属性値に対して使いたいときに役立つディレクティブです。

dataプロパティのに設定した値を{{}}（マスタッシュタグ）の中に値のキーを書くことで、htmlタグの中身は一方向バインディングを行うことができました。

HTML側↓

<div id="app">
    <p>{{ dataプロパティのキー }}</p>
</div>

Javascript側↓

const vm = new Vue({
    el: "#app",
    data: {
        キー: 値
    }
})

しかし、これには制限があります。{{}}を使ってdataプロパティに設定した値を表示することができる場所はタグの外側だけです。

「タグの外側」という表現がちょっとわかりづらくてすみません。「<」と「>」間にという意味で使っています。

HTMLの要素の属性値にdataプロパティの値を使いたい場合であっても、マスタッシュタグを属性値の部分に書くことはできません。

例えば、次のように書いたプログラムはうまく動作しません。

HTML側↓

<div id="app">
    <div class="{{ content-color }}"></div>    //divタグの内側に{{}}を使っている。
<div>

Javascript側↓

vm = new Vue({
    el: "#app",
    data: {
        content-color: "content-blue"
    }
})

そこで登場するのがv-bindディレクティブです。前回登場したv-if、v-showディレクティブと同様にディレクティブであるため、要素の<>(タグ)の中に書く必要があります。

V-bindディレクティブの使い方

v-bindディレクティブの基本的な書き方は次のようになっています。

HTML側↓

<div id="app">
    <要素名 v-bind:属性値を変化たい属性名="属性値に使うプロパティのキー"></要素名>
</div>

Javascript側↓

const vm = new Vue({
    el: "#app",
    data: {
        キー： 属性値に使う値
    }
})

赤くなっている部分は同じものが入ることを表しています。

また、Javascript側のコードにはdataプロパティの値のキーを示していますが、computedプロパティなどの値のキーを使うこともできます。

例として、img要素のhref属性の属性値をdataプロパティの値とバインディングしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>v-bindディレクティブ</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <img v-bind:src="url">  　
    </div>
    <script>
        const vm = new Vue({
            el: "#app",  
            data: {
                url: "https://konsuki.com/wp-content/uploads/2021/02/dog.jpg"   
    
            }
        })
    </script>    
</body>
</html>

画像はmartinjurekczさんによるPixabayからの画像です。

ブラウザ上の表示↓

上の実行結果からわかるように、v-bindディレクティブを使うと属性の属性値はdataプロパティに設定した値と結びつきます。

class属性とstyle属性の属性値の書き方

次はhtmlの属性の中でも有名なclass属性とstyle属性の場合について説明します。classとstyleの属性値は、他の属性の属性とは異なった形で記述されます。

v-bindディレクティブを使わなければ、classとstyleの属性値はタグの中で次のように記述されます。

<要素名 class="class1 class2…"></要素名>
<要素名 style="color: red; font-size: 11px;"></要素名>

上のようにclassとstyleは複数の属性値を持つときには「class1 class2」や「color: red; font-size: 11;」のようにして間に空白入れます。

一方でv-bindを使用するときの記述のされ方は複数あり、次のような書き方があります。

class属性の書き方①

<div id="app">
    <要素名 v-bind:class="{class1: 真偽値, class2: 真偽値}"></要素名>   //値がであるクラスがclass属性の属性値になる
</div>

真偽値をconputedプロパティやdataプロパティの値にすることもできます。

class属性の書き方②

<div id="app">
    <要素名 v-bind:class="[class1: 'クラス名', class2: 'クラス名']"></要素名>
</div>

class名をdataプロパティの値にすることもできます。

style属性の書き方①

<div id="app">
    <要素名 v-bind:style="{color: 'red', fontSize: '10px'}"></要素名>  //プロパティ名はキャメルケースで書く
</div>

style属性の書き方②↓

<div id="app">
    <要素名 v-bind:style"[{color: 'red'}, {fontSize: '10px'}]"></要素名>  //プロパティ名はキャメルケースで書く
</div>

style属性の書き方①と②では、オブジェクトをdataプロパティのオブジェクトにすることもできます。

ここまでに紹介した書き方以外にもまだ書き方はあるようです。どんなアプリケーションをつくるかによって書き方を変えていく必要があると私は考えています。

上の４つの書き方はすべて値やオブジェクトをHTMLのタグの中に書く書き方です。しかし、ほとんどの場合はdataプロパティやcomputedプロパティの方に値を書き、その値のキーをタグの中に書く方が実用的だと思います。

style属性にv-bindを使ったサンプルプログラム

サンプルプログラムの中でv-bindディレクティブを実用的に使ってみましょう。プログラムの内容としては、身長と体重からBMIを計算して、BMIが25以上であったときにalertStyleというstyleオブジェクトをBMIに適用させるプログラムです。

スタイルオブジェクトとは{color: ‘red’, fontSize: ’10px’}のようなオブジェクトのことです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>BMI計算</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <p>身長：{{ height }}cm</p>
        <p>体重：{{ weight }}kg</p>
        <p v-bind:style="isBitBig">BMI：{{ calcBMI }}<p>
    </div>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                height: 160,
                weight: 60,
                alertObject: {
                    color: '#FF7070',
                    fontWeight: 'bold',
                    border: '4px double #FF7070',
                    width: '150px'
                }
            },
            computed: {
                calcBMI: function () {
                    var BMI = this.weight / (this.height / 100 * this.height / 100);
                    return BMI  
                },
                isBitBig: function() {
                    //BMIが25以上だったらdataプロパティにあるstyleオブジェクト返し、25未満だったら空のオブジェクトを返す
                    return this.calcBMI >= 25 ? this.alertObject : {}　　 //３項演算子「a ? b : c」を使っています 
                }
            }
        })
    </script>
</body>
</html>

上で紹介した「style属性の書き方①」ではタグの中にstyleオブジェクトがあります。このプログラムでは条件を満たした場合のみstyleを要素に付けたかったため、computedプロパティを使っています。

わかりにくいコードになってしまってすみません。もっと簡単に書くこともできるかもしれません。

以上でv-bindディレクティブに関する説明を終わりにします。読んでくれてありがとうございました。
次回は、繰り返し同じ要素を画面に表示させることができるv-forディレクティブについて説明します。