【Vue】入門編(v-bind)

こんにちは。
本日はVue.jsの入門編。
v-bindについて記載します。

概要

v-bindとはVue.jsのディレクティブの1つでDOM要素の属性に対して展開します。
ちなみに、属性の展開にはMustacheは使用できません。
Mustacheについては以下の記事を参照してください。

【Vue】入門編(Mustache構文) - なんだかGoodVibes

v-bindを使用することで、属性の更新を動的に行うことができます。
v-bindの記載方法はv-bind:属性名=値です。

サンプル

本サンプルでは、ボタンの属性を動的に設定しています。
設定している内容は以下です。

• v-bind:title:マウスオーバー時に表示されるテキスト
• v-bind:disabled:ボタンの活性非活性

<button id="b-button" v-bind:title="buttonText" v-bind:disabled="isDisabled">ボタン</button>
<script>
    var vm = new Vue({
        el  :'#b-button',
        data: {
            buttonText:'ボタンです。',
            isDisabled  : true
        }
    });
</script>

以上です。