Vue3 ディレクティブについて学ぼう（v-bind）

Vue3を使う上で、たくさんある「ディレクティブ」*1は避けて通れない。
ということで今回は「v-bind」について学びます。

詳細は公式ドキュメントが一番詳しく書いてあります。
そちらの内容を少しかみ砕きます。

基本の流れ

「v-bind」はHTML要素に埋め込むときに使います。

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

これはVue3の基本である{{xxxxx}}はHTMLタグ内には書くことができないから。
v-bindをしらずにVue3触ると、以下のように書きたくなっちゃいますが動きません。

<div id = {{dynamicId}}></div>

使い方

• 属性値を動的にする場合

<div v-bind:属性値="{割り当てる値}"></div>

例えば、idに割り当てたい場合は以下とする。

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

この状態で、javascript側でdynamicIdに値を渡すと、書き換わる。
たとえば、dynamicId = 'sampleId'とかにすると以下になる

<div id="sampleId"></div>

• 属性値も動的にする場合

属性値もを、javascript側で動的にすることもできる。

<div v-bind:[ここに割り当て名を入れる]="好きな値"></div>

例としては以下のような感じ。

<div v-bind:[attribute] = 'value'></div>

javascriptで以下のようにすると、以下のようになる。 attribute=class
value = dynamicType

<div class="dynamicType"></div>

すこしハマったこと 属性値も指定できる方式について「属性値を指定できる」と勘違い。
以下の例だと、値は指定している「value」のまま動かないと思ってしまった。

そのため、以下のようなサンプルを動かそうとしたとき

  <div id="v-bind-sample">
    <div v-bind:[attribute]="value"></div>
  </div>

javascript側でずっと以下の属性値しか指定しないということをしてしまった。

const dynamicType = {
    data() {
        return {
            attribute : 'class'
        }
    }
}
Vue.createApp(dynamicType).mount('#v-bind-sample');

これだと、エラーになってしまってうまく動かない。
もちろん正しくは、以下のようにvalueも指定する形。

const dynamicType = {
    data() {
        return {
            attribute : 'class',
            value : 'dynamicType'
        }
    }
}
Vue.createApp(dynamicType).mount('#v-bind-sample');

*1:ザックリ解説：プログラムが解釈するための独自記述のようなもの。今回はVue3用の独自記述のこと