今回は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で表示されますが、数値を変えることで下記のように変わります。
自作コンポーネントの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コンポーネントのstringTextにtext変数をv-bindで渡しています。
その上のテキストボックスに値を入力すると内容が変わります。
実際に動かすと、下記のような形になります。
配列を渡してみる
文字列だけではなく、配列や論理値・数値などを渡すことも可能です。
先ほどの呼び出し元コンポーネントを下記のように変えてみました。
<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しています。
実行すると、下記のようになります。
このように配列や数値・論理値・オブジェクトなど、色々渡すことが可能です。
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のクラスが適応されます。
実際に実行すると、下記のような形になります。
コメント