v-bind 是 Vue 提供的 🔗 指令 (directive) 之一,用來綁定屬性。透過 v-bind 可以讓元素的屬性值動態更新,例如 class、style、href 等屬性。除了原生 HTML 元素的屬性之外,v-bind 也廣泛應用於自定義元件,特別是綁定 props 屬性。當你在使用自定義元件時,可以使用 v-bind 動態地將父元件的資料綁定到子元件的 props,使元件間的資料流更靈活且易於維護。
基本使用方式
v-bind:attribute="變數名稱"
:在元素上使用 v-bind 指令,並指定屬性名稱與變數名稱。:attribute="變數名稱"
:v-bind
的縮寫,可以直接使用:
符號來綁定屬性。
- 綁定 href 屬性
vue
<script setup>
import { ref } from 'vue';
const url = ref('https://vuejs.org');
</script>
<template>
<a v-bind:href="url">
Vue.js Official Website
</a>
<a :href="url">
Vue.js Official Website
</a>
</template>
- 綁定 class 屬性
vue
<script setup>
import { ref } from 'vue';
const isActive = ref(true);
</script>
<template>
<div :class="{ active: isActive }">
Active
</div>
</template>
<style>
.active {
color: red;
}
</style>
- 綁定 style 屬性
vue
<script setup>
import { ref } from 'vue';
const color = ref('red');
</script>
<template>
<div :style="{ color: color }">
Color: {{ color }}
</div>
</template>
- 綁定多個 class 或 style 屬性,以及搭配三元運算子
vue
<script setup>
import { ref } from 'vue';
const isActive = ref(true);
const color = 'red';
const fontSize = '16px';
</script>
<template>
<div
:class="[isActive ? 'active' : 'inactive']"
:style="[`color: ${color}; font-size: ${fontSize}`]"
>
Active
</div>
</template>
<style>
.active {
color: red;
}
.inactive {
color: blue;
}
</style>
- 綁定 component 的 props 屬性
vue
<script setup>
import { TestComponent } from './TestComponent.vue';
import { ref } from 'vue';
const message = ref('Hello, Vue.js!');
</script>
<template>
<TestComponent :message="message" />
</template>