v-bind 複数の属性
date
Mar 2, 2023
repo_url
slug
vbind-multi-attr
status
Published
summary
type
Post
thumbnail_url
tags
vue
outer_link
引数を指定しないでv-bindを使うと複数の属性をまとめてバインドできる。
<script setup lang="ts">
import {ref} from "vue";
const imgAttributes = ref({
src: "/images/logo.svg",
alt: "Vueのロゴ",
});
</script>
<template>
<p><img v-bind="imgAttributes"></p>
<p><img v-bind="imgAttributes" title="ロゴです！"></p>
<!--A-->
<p><img v-bind="imgAttributes" alt="ロゴです！"></p>
<!--B-->
<p><img alt="ロゴです！" v-bind="imgAttributes"></p>
</template>↓レンダリング
<p><img src="/images/logo.svg" alt="Vueのロゴ"></p>
<p><img src="/images/logo.svg" alt="Vueのロゴ" title="ロゴです！"></p>
<!--A-->
<p><img src="/images/logo.svg" alt="ロゴです！"></p>
<!--B-->
<p><img src="/images/logo.svg" alt="Vueのロゴ"></p>※Aのpはテンプレート変数よりも後にaltを書いているのでそちらが優先される。逆にBのようにテンプレート変数より前にaltなどを書いた場合は上書きされる。