# 前言

今天來講 v-bind ，一個用來在 HTML 屬性綁資料的指令。

我們已經知道雙大括號的語法可以把「變數」綁在模板內，不過這個語法並不是用於 HTML 的屬性，也就是你不能這樣寫：

<a href="{{ urlData }}"></a>

為了能在 HTML 屬性綁資料， Vue 提供 v-bind 指令給大家使用

# 基本語法

語法很簡單，使用 v-bind: 加上原本我們已經熟知的屬性即可。

<img v-bind:src="imageSrc" />

由於每次都要寫 v-bind: 實在很麻煩，於是 Vue 提供一個縮寫 ( : ) 可以代替 v-bind: ：

一般 HTML 屬性的資料往往是「一個」值，但 class 的資料可能會出現好幾個值，所以 Vue 提供了幾種不同的寫法：

<div :class="{ red: isRed }"></div>

這個寫法的好處是，我們只要去控制 isRed 變數值，就可以動態更改模板的 class 名稱。

可以寫多組資料：

<div :class="{ red: isRed , yellow:isYellow}"></div>

<div :class="[textClass, modelClass]"></div>

	Vue.createApp({
	setup() {
	const textClass = Vue.ref("text-xl text-[#ccc]");
	const modelClass = Vue.ref("mt-5 p-10");
	return { classA, classB };
	},
	}).mount("#app");

<div :class="[classA, { classB: isB, classC: isC }]"></div>

想綁 style 屬性也是有物件型寫法，跟陣列型寫法

<div :style="{ fontSize: size + 'px' }"></div>

<div :style="[styleObjectA, styleObjectB]"></div>

此時的 JS 會是這樣紀錄：

	Vue.createApp({
	setup() {
	const styleObjectA = Vue.ref({
	'font-size': "16px",
	'font-weight': "bold",
	});
	const styleObjectB = Vue.ref({
	'margin':'auto',
	'padding':'10px'
	});
	return { styleObjectA, styleObjectB };
	},
	}).mount("#app");

渲染的結果會長這樣；

	<div id="app" data-v-app>
	<div style="font-size: 16px; font-weight: bold; margin: auto; padding: 10px;"></div>
	</div>

vue