Vue.jsのv-bind【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのv-bindについて、簡単に解説していきます。

v-bindとは

v-bindとは、要素の属性を動的に変更できる機能です。

簡単に言うと、要素の属性をバインディングさせるということです。

<div id="app">
    <input type="text" v-bind:placeholder="placeholder">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    placeholder: 'ほげ'
  }
})
</script>

例えば、上記の例では、idがappのdiv要素の中のplaceholder属性をバインディングさせ、スクリプトのplaceholderプロパティの値を表示させています。

文字列とプロパティの連結

v-bindで文字列とプロパティを連結することも可能です。

<div id="app">
    <input type="text" :value="value+'様'">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    value: 'ほげ'
  }
})
</script>

上記のように、+で連結ができ、文字列はシングルクォートで囲みます。

また、上記の例のように、v-bindは省略して:を付けるだけでもバインディングできます。

{}を使った特殊な書き方

{}を使ってプロパティの値によってclass名等を臨機応変に変えられます。

例えば、{}の中でクラス名:真偽値を書くと、真の場合にそのクラス名が付与されます。

<style>
.red{
    color: red;
}
.bold{
    font-weight: bold;
}
.underline{
    text-decoration:underline;
}
</style>

<div id="app">
    <span :class="{red : redCheckbox, bold : boldCheckbox, underline : underlineCheckbox}">チェックによって文字が変わります</span>
    <input type="checkbox" v-model="redCheckbox" /> 赤字
    <input type="checkbox" v-model="boldCheckbox" /> 太字
    <input type="checkbox" v-model="underlineCheckbox" /> 下線
</div>

<script>
new Vue({
    el: '#app',
    data: {
        redCheckbox : false,
        boldCheckbox : false,
        underlineCheckbox : false,
    }
});
</script>

上記のコードの例では、チェックボックスのチェック状態によって、クラス名を切り替えています。