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

f:id:ryoutaku_jo:20190920041018p:plain

【結論】

・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.js

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

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

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

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

残り・・・「7344時間!」