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

Vue.js Vue.js

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

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

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でクラスを切り替える

コメント

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