ホーム

転職ドラフト(次回10/20)

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

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

環境
Nuxt2.15.7

目次

  1. v-bind の基本的な考え方
  2. 実装
  3. 実例

v-bind の基本的な考え方

HTML のタグの例えば、

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

通常

<a href="https://poppotennis.com/">リンク</a>

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

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

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

実装

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

1つ目の書き方

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

2つ目の書き方

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

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

実例

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 から頂ければ幸いです。

それでは!