【Vue基礎】v-bindディレクティブを理解する

Vディレクティブとは

Vディレクティブとは、テンプレート（HTML）内で動的な仕組みを要素に与えるための属性です。
v-で始まる属性により、Vueのテンプレート構文内で特別な動作を定義するために使われます。

HTML属性にデータを動的にバインドするv-bind

HTML属性にVueのデータや式の結果を紐づけるためのディレクティブで、JavaScriptの変数や状態に応じてHTMLをリアルタイムに変化させることができバインドすると言います。バインド？と感じる方もいるかもしれませんが、簡単に考えると変数割り当てなイメージでよいかと思います。

基本構文

disabled属性よりボタン制御、src属性より画像のURLバインド、alt属性より画像の説明を取得などv-bindはなんでもいけちゃいますね。

<template>
<!-- 通常の書き方 -->
  <a v-bind:href="siteUrl">リンク</a>
<!-- 省略形（よく使われる）の書き方 -->
  <a :href="siteUrl">リンク</a>
</template>

<script setup>
  import { ref } from "vue"
  const url = ref("https://nandakke-ashiri.net/")
</script>

画像データ取得

<template>
  <img :src="imgUrl" :alt="imgAlt">
</template>

<script setup>
const imgUrl = 'https://nandakke-ashiri.net/banner.jpg'
const imgAlt = '画像内容'
</script>

Composition APIを使う

styleObject を変更すれば、自動的にスタイルが更新できます。

<template>
  <div :style="objectStyle">Composition API</div>
</template>

<script setup>
import { reactive } from 'vue'
const objectStyle = reactive({
  color: '#fff',
  backgroundColor: '#082C53',
  padding: '10px'
})
</script>

複数スタイル組み合わせ

<template>
  <div :style="[baseStyle, conditionStyle]">配列による複数スタイル</div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const baseStyle = reactive({
  fontSize: '16px',
   backgroundColor: '#082C53',
})

const isError = ref(true)

const conditionStyle = computed(() => ({
  color: isError.value ? 'red' : 'black'
}))
</script>

条件にてクラス切り替え

<template>
  <div :class="{ active: isActive, 'is-error': hasError }">条件付きクラス</div>
</template>

<script setup>
import { ref } from 'vue'

const isActive = ref(true)
const hasError = ref(false)
</script>

isActive が true であれば、activeクラスが付き、hasError が true であれば、is-errorクラスが付きます。 クラスリストはそれに応じて更新されます。

まとめ

いかがでしたでしょうか。今回は、JavaScriptフレームワークVueのリアクティブv-bindについて、ご紹介させていただきました。V-bindは、HTML要素に動的にCSSクラスを付けるための超便利なディレクティブで、UIの状態によってクラスを切り替えたい時などに最適ですね。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。