Vueで生成されたHTML属性を動的に追加する「v-bind」の使い方

【結論】

・Mustache（二重括弧・{{ }}）は、HTML 属性の内部で使用することは出来ない

・HTML属性を動的に追加したい場合は、「v-bind」を使用する

・「v-bind」内（データバインディング内）では、JavaScriptの式が使用できる

【目次】

【本題】

Vueで生成されたHTML属性を動的に追加する方法

VueではMustache（二重括弧・{{ }}）を用いれば、以下の様に要素をHTMLにテキストとして展開することが可能です。

<li v-for="item in items">
   {{ item.message }}
</li>

↓

<li>メッセージ１</li>
<li>メッセージ２</li>
<li>メッセージ３</li>

しかし、Mustache（二重括弧・{{ }}）は、HTML属性で使用することは出来ません。

↓利用できない例

<div id="{{ sample_id }}"></div>

この様なHTML属性を動的に追加したい場合に用いるのが「v-bind」です。

「v-bind」について

「v-bind」を利用することで、HTML属性内でも要素を展開することができます。

<div v-bind:id="sample_id"></div>

id以外の属性にも対応しています。

<div v-bind:class="sample_id" v-bind:disabled="isSample" v-bind:name="sampleName"></div>

なお、このデータバインディング内では、JavaScriptの式を利用することも可能です。

なので、以下の様にテンプレートリテラルで文字列を結合して展開することも可能です。

<div v-bind:class="`sample-${sample.id}`"></div>

参考情報

テンプレート構文 — Vue.js

Vueのテンプレートのv-bind内でもJavaScriptのテンプレートリテラルが使えた - GAミント至上主義

《今日の学習進捗（3年以内に10000時間に向けて）》

社内勉強会の資料、ギリギリ間に合った・・・

学習開始からの期間 ：285日
今日までの合計時間：2656h
一日あたりの平均学習時間：9.4h
今日までに到達すべき目標時間：2603h
目標との解離：53h
「10,000時間」まで、

残り・・・「7344時間！」