# 動態指令參數
指令參數可以接受動態 JavaScript 的表達式，而動態參數值要為 字串，但允許 null 作為一個明確指示應該刪除綁定的特殊值，任何其他非字串值都有可能會出錯。(僅適用於 v-bind 和 v-on)
<!-- 這會觸發編譯的警告且無效 -->
<a v-bind:['foo' + bar]="value"> ... </a>
1
2
2
如果要在動態參數中使用表達式，應使用 沒有空格或引號的表達式，或用計算屬性替代這種複雜的表達式。
# 指令的綁定
<div v-bind:[attr]="attributeName"></div>
<!-- 也可以這樣寫 -->
<div :[attr]="attributeName"></div>
1
2
3
2
3
如果 attr 的值為 id，綁定結果將會等於：
<div :id="attributeName"></div>
1
# 事件名稱的綁定
同樣的，也可以使用動態參數作為一個動態事件名稱的綁定。
<button v-on:[eventName]="handler"></button>
<!-- 也可以這樣寫 -->
<button @[eventName]="handler"></button>
1
2
3
2
3
# 插槽的綁定
<my-component>
<template v-slot:[slotName]>
Dynamic slot name
</template>
</my-component>
<!-- 也可以這樣寫 -->
<my-component>
<template #[slotName]>
Default slot
</template>
</my-component>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11