v-bind Dynamic Arguments

date

Mar 2, 2023

repo_url

slug

vbind-dynamic-arguments

status

Published

summary

type

Post

thumbnail_url

バインドする属性をテンプレート変数として指定する

引数をテンプレート変数で指定する方法を”動的引数（Dynamic Arguments）”という。

<script setup lang="ts">
import {ref} from "vue";

const widthOrHeight = ref("height");
const widthOrHeightValue = ref(100);
</script>

<template>
	<p><img alt="VueLogo" src="./assets/logo.svg" v-bind:[widthOrHeight]="widthOrHeightValue"></p>
</template>

↓レンダリング

<img alt="VueLogo" src="/src/assets/logo.svg" height="100">