属性バインディング

概要

v-bind

もし、Vueで動的に属性をバインドしたいならv-bindディレクティブを使用することができる。

<div v-bind:id="dynamicId"></div>

コロンの後の部分(:id)は引数である。
v-bindは頻繁によく使用するため、専用の省略記法がある。

<div :id="dynamicId"></div>

実際にrefを使用して、動的バインディングを実装すると以下のようになる。

<script setup>
	import { ref } from 'vue';
	
	const titleClass = ref('title')
</script>
 
<template>
	<h1 :class="titleClass">Hello World!</h1>
</template>
 
<style>
	.title{
		color: red;
	}
</style>

これは、<h1>にtitleClassのrefの値を属性バインディングしている。