Vuejs 属性要素にマスタッシュ構文を使用する【idやclassを指定する】

マスタッシュ構文なるものを覚えたので、属性要素idにマスタッシュ構文を使用し、idを指定してやろうと思ったのですが,,,

<div id={{custom-id}}></div>

こんな書き方は、出来ません。

タイトル詐欺じゃないか、と思った方。

ごめんなさい。

ただ、他の方法があるため、そちらをご紹介いたします。

まず、マスタッシュ構文というのは、テキストのために用意されたものです。

それと同じように属性のために用意された構文もあります。

それが、データバインディング構文です。

書き方としては、こんな感じです。

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

データの受け渡しは、マスタッシュ構文と同じのため、HTML部分への記述方法が異なるだけです。

これをidではなく、classにしたら、classにもバインディングすることが可能です。

このなかなか見慣れない構文。

このような書き方に変更しても同じように動作します。

<div :id="custom-id"></div>

こちらの方が、簡単で分かりやすいですね。