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>

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

　Point

テキストには、マスタッシュ構文 属性には、データバインディング構文を使用しよう！