Vueのv-bindとは？v-bindを使う理由や方法について
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vue の v-bind について書いていきます。なぜ v-bind を使うのか、基本的な書き方についても書いています。
v-bind とは？
v-bind は、Vue.js において要素やコンポーネントの属性にデータバインディングを行うためのディレクティブです。通常、HTML 要素の属性は静的な値を持ちますが、v-bind を使用することで Vue のデータプロパティや計算結果を動的にバインディングできます。
データバインディングと言われると、難しく感じてしまいますが、ようするに HTML で静的に指定していたものを、動的に（変数を使って）指定することができるものです。
例えば、<img/>のsrc や <a></a>のhref に対して変数を使いたいときに v-bind を使います。
静的
<template>
<a href="https://laratech.jp/">リンク</a>
</template>データバインディング
<template>
<a v-bind:href="url">リンク</a>
</template>
<script setup>
import { ref } from "vue"
const url = ref("https://laratech.jp/")
</script>urlという変数をhrefに指定することができるのが、この v-bind です。
v-bind の基本的な書き方
v-bind には２つの書き方があります。
１つ目の書き方
<a v-bind:href="link">リンク</a>２つ目の書き方(推奨)
<a :href="link">リンク</a>linkという変数をhrefに指定しています。
２つ目の書き方の方がシンプルに文字数が少ないので自分は２を推奨していて、１を使う理由はないんじゃないかと思います。
実際に使う事例
子コンポーネントの props に変数を渡す
一番よく使うのがこれです。
<template>
<Children :title="title" />
</template>
<script setup>
import { ref } from "vue"
const title = ref("タイトル")
</script>複数渡すこともできます。
<template>
<Children :title="title" :subtitle="subtitle" />
</template>
<script setup>
import { ref } from "vue"
const title = ref("タイトル")
const subtitle = ref("サブタイトル")
</script>画像の src に変数を使う
<template>
<img :src="imgUrl" />
</template>
<script setup>
import { ref } from "vue"
const imgUrl = ref("画像のURL")
</script>リンクの href に使う
<template>
<a :href="url">リンク</a>
</template>
<script setup>
import { ref } from "vue"
const url = ref("https://laratech.jp/")
</script>インプットの value に使う
以下のように書かないとstringになってしまうので、たまに使います。
Vue の場合、動的に value を使うことは v-model があるため、あまりないと思います。
<template>
<form>
<input :value="0" name="is_accept" />
<input :value="1" name="is_accept" />
</form>
</template>style に変数を使う
<template>
<h1 :style="`color:${color}`">タイトル</h1>
</template>
<script setup>
import { ref } from "vue"
const color = ref("blue")
</script>v-bind を使う理由
上記で使用例をあげたように、手軽に動的なページを作ることが可能になります。
例えばユーザーページで、ログイン中のユーザーのロゴを表示したい時などの例です。
<template>
<img :src="imgUrl" alt="ユーザーのロゴ" />
</template>
<script setup>
import { ref, onMounted } from "vue"
import axios from "axios"
const imgUrl = ref("")
const fetchLogoUrl = async () => {
try {
const { data } = await axios.get("/api/user/logo")
imgUrl.value = data.logoUrl // 取得したデータに応じてプロパティを設定
} catch (error) {
console.error("Error fetching logo URL:", error)
}
}
// マウントされたときにデータを取得
onMounted(() => {
fetchLogoUrl()
})
</script>このように、動的にページを作りたい時に使います。
ま とめ
以上、Vue を始めたばかりの人にも伝わりやすいように、 v-bind について自分なりに分かりやすく書いてみた記事でした。
誰かの参考になれば幸いです。
