Vue

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

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

目次

  1. v-bind の基本的な考え方
  2. 実装
  3. 実例
  4. まとめ
オススメ本
WEB+DB PRESS Vol.136
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ Vue 記事の目次はこちら

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

環境
Nuxt2.15.7

v-bind の基本的な考え方

HTML のタグの例えば、

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

通常

<a href="https://poppotennis.com/">リンク</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 から頂ければ幸いです。

それでは！