ホーム > Vue > Vueのv-bindとは？基本的な使い方について
Vue

Vueのv-bindとは？基本的な使い方について

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. v-bind の基本的な考え方
  2. 実装
  3. 実例
  4. まとめ
オススメ本

⇨ Vue 記事の目次はこちら

Vue の v-bind について、基本的な書き方とともに解説を行なっていきたいと思います

環境
Nuxt2.15.7

v-bind の基本的な考え方

HTML のタグの例えば、

src や href に対して「変数を使いたい」ときに v-bind を使います。

通常

<a href="https://laratech.jp//">リンク</a>

と、なりますが、url という変数を当てたいときは、

<a :href="url">リンク</a>

と書くことができるのが v-bind になります。

実装

v-bind には２つの書き方があります。

１つ目の書き方

<a v-bind:href="link">LINK</a>

２つ目の書き方

<a :href="link">LINK</a>

上記を見比べて分かるとおり、２つ目の書き方の方が文字数も少なく、スッキリしているため、僕は２つ目の書き方をすれば良いと思っています。

実例

style に変数を使う

<template>
  <h1 :style="`color:${color}`">タイトル</h1>
</template>
<script>
  export default {
    data() {
      return {
        color: "blue",
      }
    },
  }
</script>

画像の src に変数を使う

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

<script>
  export default {
    data() {
      return {
        imgUrl: "画像のurlをここに書く",
      }
    },
  }
</script>

子コンポーネントの props に変数を渡す

<Children :subtitle="subtitle" />

⇨Vue の Props の使い方と基本的な書き方

まとめ

以上、Vue の v-bind について僕なりに分かりやすく始めた人が伝わりやすいように書いてみた記事でした！！

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！