【結論】
・Mustache(二重括弧・{{ }})は、HTML 属性の内部で使用することは出来ない
・HTML属性を動的に追加したい場合は、「v-bind」を使用する
・「v-bind」内(データバインディング内)では、JavaScriptの式が使用できる
【目次】
【本題】
Vueで生成されたHTML属性を動的に追加する方法
VueではMustache(二重括弧・{{ }})を用いれば、以下の様に要素をHTMLにテキストとして展開することが可能です。
<li v-for="item in items"> {{ item.message }} </li>
↓
<li>メッセージ1</li> <li>メッセージ2</li> <li>メッセージ3</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のテンプレートのv-bind内でもJavaScriptのテンプレートリテラルが使えた - GAミント至上主義
《今日の学習進捗(3年以内に10000時間に向けて)》
社内勉強会の資料、ギリギリ間に合った・・・
学習開始からの期間 :285日
今日までの合計時間:2656h
一日あたりの平均学習時間:9.4h
今日までに到達すべき目標時間:2603h
目標との解離:53h
「10,000時間」まで、
残り・・・「7344時間!」