Vue中的v-bind指令可以用于綁定模板表達式到Vue實例數據中的屬性上。可以在HTML標簽上使用v-bind指令，也可以在綁定數據時使用簡寫語法“:”代替v-bind。下面是一些常見的用法。

<div v-bind:class="{'active': isActive}"></div>
<img v-bind:src="imgUrl">
<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></p>

可以通過v-bind綁定對象或數組，對象的屬性將被認為是要綁定的特性名，屬性值是表達式，數組中第一個元素是特性名，第二個元素是表達式。

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<component v-bind:is="currentTabComponent"></component>

還可以使用v-bind綁定DOM屬性，這種綁定并不會改動DOM特性本身，而是對特性賦予新值。

<a v-bind:href="url" target="_blank"></a>
<input v-bind:value="message">

綁定class和style屬性時，可以使用對象語法或數組語法。對象語法可以使用三元表達式設置樣式，數組語法可以插入表達式和計算屬性。

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:style="{ fontSize: size + 'px', color: activeColor }"></div>
<div v-bind:class="[classA, classB]"></div>

在使用v-bind時，如果綁定的數據為undefined、null或false，則該特性不會被包含在渲染的輸出中。如果綁定的特性名稱為class或style，則可以使用空對象或空數組清空綁定的樣式或類名。

<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="{}"></div>
<div v-bind:class="[]"></div>