Vue.jsのv-bindとは?使い方とサンプルコード4つ!

Vue.jsJavaScript

今回はVue.jsのv-bindについて書いています。

v-bindについて説明した後に、サンプルコードを書いているので、確認してみてください。
コードはVue.jsのバージョン3(Composition API)で試してみました。

PR

v-bindとは?

Vue.jsのv-bindは、作成した変数の値をコンポーネントのpropsや、HTMLの属性に渡すために使います。

例えばHTMLの属性に渡す場合です。
下記はimgタグのwidth属性にv-bindを使って、imageWidth変数を渡しています。

<img v-bind:width="imageWidth" src="https://codelikes.com/wp-content/uploads/2019/10/MIYA157092731_TP_V-e1601052110285.png" />

こうすると、imageWidth変数に変化があるたびに、画像のwidth属性が動的に変わります。

今回は例として、width属性を使用しました。
他の属性でも同じようにv-bind:と書くことで、Vue.jsで定義した変数を展開することが可能です。
今回のように「v-bind:属性名=”変数(もしくは値)”」とすることで、それぞれの属性値に値を渡せます。

自作コンポーネントのpropsにも値を渡すことが可能です。

v-bindを使ったサンプル

v-bindを実際に使ったサンプルコードを載せて、簡単に解説します。

画像のwidthを変えてみる

画像のwidthを変えてみます。
下記のようなコンポーネントを用意しました。

<template>
  <div class="m-3">
    <div>
        <label> input image width: 
            <input type="text" v-model="imageWidth" class="p-1 border ring-1 rounded-md border-color-300 mb-3" />
        </label>
     </div>
     <img v-bind:width="imageWidth" src="https://codelikes.com/wp-content/uploads/2019/10/MIYA157092731_TP_V-e1601052110285.png" />
  </div>
</template>
<script>
import { ref } from 'vue'
export default ({
  setup() {
    const imageWidth = ref(100)

    return {
      imageWidth
    }
  }
})
</script>

画像のwidthを入力するテキストボックスを作成して、入力した数値がv-bindを使用して、画像のwidthに反映されます。
スクリプトの箇所にはimageWidthという変数を100で初期化して返しています。

初期は100で表示されますが、数値を変えることで下記のように変わります。
Vue.jsのv-bindでwidthを変える

自作コンポーネントのpropsに値を渡す

自作したコンポーネントのpropsにv-bindを使用して値を渡してみます。

コンポーネントは下記です。
stringTextを受け取って、表示するだけのコンポーネントです。
testという名前のコンポーネントです。

<template>
  stringText : {{ stringText }}
</template>
<script>
export default ({
  props: ['stringText'],
})
</script>

定義したtestコンポーネントを下記のコンポーネントから呼び出します。

<template>
  <div class="m-3">
     <input type="text" v-model="text" class="p-1 border ring-1 rounded-md border-color-300 mb-3" />
     <test v-bind:stringText="text" />
  </div>
</template>
<script>
import { ref } from 'vue'
export default ({
  setup() {
    const text = ref('hello')

    return {
      text
    }
  }
})
</script>

testコンポーネントのstringTexttext変数をv-bindで渡しています。
その上のテキストボックスに値を入力すると内容が変わります。

実際に動かすと、下記のような形になります。
Vue.jsのv-bindでコンポーネントのpropsを変える

配列を渡してみる

文字列だけではなく、配列や論理値・数値などを渡すことも可能です。
先ほどの呼び出し元コンポーネントを下記のように変えてみました。

<template>
  stringText : {{ stringText }}
</template>
<script>
export default ({
  props: ['stringText', 'myArray'],
  setup(props) {
    console.log(props.myArray)
  },
})
</script>

propsにmyArrayを追加しました。
propsで配列を渡して、コンソールで出力してみます。

<template>
  <div class="m-3">
     <test v-bind:myArray="fruits" />
  </div>
</template>
<script>
import { ref } from 'vue'
export default ({
  setup() {
    const fruits = ref(['apple', 'banana', 'grape'])

    return {
        fruits
    }
  }
})
</script>

呼び出し先から、上記のように呼び出してみました。
fruits配列に3つの値を渡して、それをコンポーネントにv-bindしています。

実行すると、下記のようになります。
Vue.jsのv-bindでコンポーネントに配列を渡す

このように配列や数値・論理値・オブジェクトなど、色々渡すことが可能です。

v-bindの省略形式

実はv-bindはコロンだけでも機能します。
簡単なので、こちらの書き方の方がよく使われている気がします。

下記のようにv-bindを省略して、:属性名="変数(値)"でもOKです。

<img :width="imageWidth" src="https://codelikes.com/wp-content/uploads/2019/10/MIYA157092731_TP_V-e1601052110285.png" />

v-bindでクラスを切り替える

v-bindでクラスを状況によって、変更することも可能です。
v-bindを書いている箇所で、三項演算子を使って下記のように変えてみました。(スクリプトは省略します)

<template>
  <div :class="imageWidth == 300 ? 'bg-blue-900' : ''">
    <div>
        <label> input image width: 
            <input type="text" v-model="imageWidth" class="p-1 border ring-1 rounded-md border-color-300 mb-3" />
        </label>
     </div>
     <img :width="imageWidth" src="https://codelikes.com/wp-content/uploads/2019/10/MIYA157092731_TP_V-e1601052110285.png" />
  </div>
</template>

一番上のタグに:classで、クラスにv-bindしています。
入力されたimageWidthが300だった場合に、背景を青にするbg-blue-900のクラスが適応されます。

実際に実行すると、下記のような形になります。
Vue.jsのv-bindでクラスを切り替える

JavaScriptVue.jsプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました