【Vue.js】v-bindとは？使い方をサンプルコードで解説

2020年11月14日

手っ取り早くこのページのサンプルコードを検証するには、下記のvueライブラリを事前に読み込んでおいてください。

v-bindとは？属性を動的に設定できる機能

v-bindは、要素に含まれる属性（href=””など）を動的に設定・変更することが出来る設定方法です。

<div id="app-1">
    <a target="_blank" v-bind:href="link">{{ link }}</a>
    
    <input type="button" @click="link = 'https://google.com/'" value="リンクをグーグルに変更" />
    <input type="button" @click="link = 'https://yahoo.co.jp/'" value="リンクをヤフーに変更" />
</div>

<script>
new Vue({
    el: '#app-1',
    data: {
        link : '#',
    }
});
</script>

ボタンを押すと、「link」の値を書き換えます。

すると、v-bindで設定したhrefは、「link」を参照しているため、ボタンクリックで代入されたURLに遷移できます。

実際にクリックしてお試しください。

v-bind:の「v-bind」は省略できる

「v-bind:」の「v-bind」の記述は省略できます。

<div id="app-2">
    <a target="_blank" :href="link">{{ link }}</a>
    
    <input type="button" @click="link = 'https://google.com/'" value="リンクをグーグルに変更" />
    <input type="button" @click="link = 'https://yahoo.co.jp/'" value="リンクをヤフーに変更" />
</div>

<script>
new Vue({
    el: '#app-2',
    data: {
        link : '#',
    }
});
</script>

v-bindで文字列と変数を使用する例

v-bindで設定する中身は、JavaScriptの記述と同様に書く必要があります。

なので、変数と文字列を合わせて使用したい場合は、シングルクオーテーションで囲み、「+」などを使用して連結させる必要があります。

下記は、配列で生成したチェックボックスに、それぞれ対応するidとlabelをv-bindで設定した例です。

<div id="app-3">
    <span v-for="(val, key) in checklistAry">
        <input type="checkbox" v-model="checksampleAry" v-bind:value="val" :id="'check' + key" />
        <label :for="'check' + key">{{ val }}</label>
    </span>
    <p>checksampleAryの値は「{{ checksampleAry }}」です。</p>
</div>

<script>
new Vue({
    el: '#app-3',
    data: {
        checklistAry : ['hoge', 'fuga', 'piyo'],
        checksampleAry : [],
    }
});
</script>

v-bind:classの特殊記法

v-bind:classで設定する場合、｛｝で囲うオブジェクト形式の指定が可能です。（通常の記述も可能です）

｛クラス名 : 真偽値｝という形で設定し、真偽値によってクラスの付与を切り替えることが可能です。

オブジェクト形式で設定できるので、下記のように複数の設定が可能です。

<style>
.red{
    color: red;
}
.bold{
    font-weight: bold;
}
</style>
<div id="app-4">
    <p :class="{red : redcheck, bold : boldcheck}">チェックによって文字が変わります</p>
    
    <input type="checkbox" v-model="redcheck" /> 赤くする
    <input type="checkbox" v-model="boldcheck" /> 太くする
</div>

<script>
new Vue({
    el: '#app-4',
    data: {
        redcheck : false,
        boldcheck : false,
    }
});
</script>

v-bind:styleの特殊記法

v-bind:styleで設定する場合も、｛｝で囲うオブジェクト形式の指定が可能です。（通常の記述も可能です）

｛style名 : 値｝という形で設定し、style名と値を紐づけることが出来ます。

こちらもオブジェクト形式で設定できるので、下記のように複数の設定が可能です。

<div id="app-5">
    <p :style="{color : radiosample}">ラジオボタンによって文字が変わります</p>
    
    <input type="radio" value="black" v-model="radiosample" /> black
    <input type="radio" value="blue" v-model="radiosample" /> blue
    <input type="radio" value="red" v-model="radiosample" /> red
    <input type="radio" value="pink" v-model="radiosample" /> pink
    <input type="radio" value="gray" v-model="radiosample" /> gray
</div>

<script>
new Vue({
    el: '#app-5',
    data: {
        radiosample : 'black',
    }
});
</script>

---

以上、v-bindとは？使い方をサンプルコードで解説、でした。