未分類

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 

テキストには、マスタッシュ構文

属性には、データバインディング構文を使用しよう!

 

 

-未分類

Copyright© エンジニアの階段 , 2020 All Rights Reserved Powered by STINGER.