投稿者: 
最近携わっているVueについての備忘録。
v-bind
データバインディングのディレクティブ。マスタッシュ構文が使用できないタグの属性部分に対してテンプレート変数を利用するためのもの。
基本構文
<script setup>
import {ref} from "vue";
const url = ref("https://vuejs.org/");
</script>
<template>
// 基本
<a v-bind:href="url" target="_blank">SAMPLE1</a>
// 省略記述
<a :href="url" target="_blank">SAMPLE2</a>
// v-bind内では式が記述できる
<a v-bind:href="url + 'sample.html'" target="_blank">SAMPLE3</a>
</template>
// 結果
<a href="https://vuejs.org/" target="_blank">SAMPLE1</a>
<a href="https://vuejs.org/" target="_blank">SAMPLE2</a>
<a href="https://vuejs.org/sample.html" target="_blank">SAMPLE3</a>属性をテンプレート変数として指定
属性名をテンプレート変数で指定する。
変数に入れた属性名を[]で囲って記述。
<script setup>
import {ref} from "vue";
const height = ref("height");
const heightValue = ref(100);
</script>
<template>
<img src="./img01.png" alt="sample" v-bind:[height]="heightValue">
</template>
// 結果
<img alt="sample" height="100" src="/src/img01.png">複数の属性をセット
オブジェクトにて複数の属性データを格納し、v-bind設定する。引数を指定しないとv-bindを行うと複数の属性をまとめてバインドできる。
<script setup>
import {ref} from "vue";
const attribute = ref({
src: "img/logo.png",
alt: "ロゴ画像",
width: 200,
height: 150
})
</script>
<template>
<img v-bind="attribute">
// 通常の属性と混在できる
<img v-bind="attribute" title="SAMPLE">
// 直接記述した属性は上書きされる
<img v-bind="attribute" alt="ロゴ画像ロゴ画像">
</template>
// 結果
<img src="img/logo.png" alt="ロゴ画像" width="200" height="150">
<img src="img/logo.png" alt="ロゴ画像" width="200" height="150" title="SAMPLE">
<img src="img/logo.png" alt="ロゴ画像ロゴ画像" width="200" height="150">style属性へのバインド
v-bind:styleの属性値はオブジェクトリテラル。本来スタイルプロパティはケバブケースでの記法だが、オブジェクトのプロパティにはハイフン使用不可なため、キャメルケースを使用している。
<script setup>
import {ref, computed} from "vue";
const msg = "HELLO";
const txtColorRed = ref("red");
const style1 = ref({
fontSize: "25px",
color: "blue"
});
const style2 = ref({
fontSize: "28px",
background: "green"
})
const fontSizeStyle = computed(() => {
const size = Math.round(Math.random() * 25);
return `${size}px`
})
</script>
<template>
// リテラル部分にはシングルクォーテーション要
<p v-bind:style="{color: 'pink'}"> {{ msg }} </p>
// テンプレート変数の指定
<p v-bind:style="{color: txtColorRed}"> {{ msg }} </p>
// オブジェクトリテラルにて複数指定
<p v-bind:style="style1"> {{ msg }} </p>
// オブジェクトを配列にて複数指定
// 被っていた場合は配列の後ろにあるものを適用
<p v-bind:style="[style1, style2]"> {{ msg }} </p>
// 算出プロパティもそのまま指定できる
<p v-bind:style="{fontSize: fontSizeStyle}"> {{ msg }} </p>
</template>
// 結果
<p style="color: pink;">HELLO</p>
<p style="color: red;">HELLO</p>
<p style="font-size: 25px; color: blue;">HELLO</p>
<p style="font-size: 28px; color: blue; background: green;">HELLO</p>
<p style="font-size: 24px;">HELLO</p>参考書籍：Vue 3 フロントエンド開発の教科書
c.sakyou