前言

這篇主要說明 Vue 的 v-bind 指令，它可以將資料綁定在 HTML 的標籤上，是非常實用又常用的指令，但在介紹 v-bind 前，我們先來介紹比較簡單的兩個指令：v-text 和 v-html。

v-text 和 v-html

v-text 這個指令只能用來呈現資料裡的文字，而 v-html 則是如果資料裡面有包含 html 的標籤，可以把它解析成 html：

<!-- 顯示帶有 html 結構的文字 -->
<div v-text="message"></div> 

<!-- 顯示解析 html 後的文字 -->
<div v-html="message"></div> 
const app = Vue.createApp({
   data() {
    return {
      message: 'Hi <strong>Vue3</strong>'
    }
  }
}).mount('#app')

v-text 會顯示：Hi<strong>Vue3</strong>
v-html 會顯示： Hi Vue3

v-bind

以下這個範例我們想將一個圖片網址的資料綁定到 img 的 src 屬性上，如果在 src 裡包上雙大括號會發現沒有反應，這時候我們就可以使用 v-bind 來在屬性上綁定資料：

<div id="app">
  <!-- 錯誤示範，圖片無法顯示 -->
  <img src="{{ imgUrl }}"/>

  <!-- 正確示範 -->
  <img 
    v-bind:src="imgUrl"
    v-bind:alt="description"
  />
</div>
const app = Vue.createApp({
  data() {
    return {
      imgUrl: 'https://fakeimg.pl/200x100/',
      description: 'fake-img'
    }
  }
}).mount('#app')

最後 <img> 渲染結果為：

<img src="https://fakeimg.pl/200x100/" alt="fake-img"/>

Tips

  1. v-bind 可以綁定多個屬性
  2. v-bind 可簡寫成 :，例如： <div :id="xxx">
  3. 要綁定的資料的名字不要與標籤屬性一樣，例如： <img :src="src">

v-bind 綁定 class(物件方式)

以 v-bind 綁定 class 來說，我們可以給 :class 傳遞一個物件，方便我們動態切換 class：

<div :class="{ active : isActive }"></div>

上面這段表示 active 這個 class 的存在與否，受 isActive 影響。如果是 isActive 是 true，則帶有 active 這個 class，反之則無。

而你也可以在物件裡傳入多個 class。並且 :class 能與普通的 class 共存：

<div id="app">
  <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  >
  </div>
</div>
const app = Vue.createApp({
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
}).mount('#app')

div 渲染結果為：

<div class="static active">

tips
如果在物件裡綁定的值有包含特殊符號，請用單引號包裹起來，例如:
:class="{ 'text-danger': hasError }"

v-bind 綁定 class(陣列方式)

除了能傳遞物件，我們也能傳遞陣列：

<div id="app">
  <!-- 綁定多個 class -->
  <div :class="[activeClass, dangerClass]">
</div>

如果想根據條件切換 class，也能這樣用：

<div id="app">
  <div :class="[isActive ? activeClass : '', dangerClass]">
</div>

陣列裡面可以包含表達式。如果 isActive 是 true，回傳 activeClass，否則回傳空字串，並且始終添加 dangerClass。

但當有多個條件 class 時，向上面這樣寫會有點冗長，所以陣列裡也能使用物件：

<div id="app">
  <div :class="[{ active: isActive }, dangerClass]">
</div
const app = Vue.createApp({
  data() {
    return {
      activeClass: 'active',
      isActive: true,
      dangerClass: 'danger',
    }
  }
}).mount('#app')

v-bind 綁定 style

:style 綁定特別要注意的地方就是屬性名字要使用駝峰式，或是使用橫線分隔(要用單引號包住)，並且能使用表達式：

<div id="app">
  <div 
    :style="{ color: color, fontSize: size + 'px' }">
  </div>
  <!-- or -->
  <div 
    :style="{ color: color, fontSize: `${size}px` }">
  </div>
</div>
const app = Vue.createApp({
  data() {
    return {
      color: 'red',
      size: 30,
    }
  }
}).mount('#app')

你也可以直接綁定一個物件，這樣能讓結構更明瞭：

<div id="app">
  <div :style="allStyle"></div>
</div>
const app = Vue.createApp({
  data() {
    return {
      allStyle: {
        color: 'red',
        fontSize: '30px'
      }
    }
  }
}).mount('#app')

或者你也可以綁定一個陣列，裡面傳入多個物件，來綁定更多的 CSS 屬性：

<div id="app">
  <div :style="[boxModel, bgColor]">1234</div>
</div>
const app = Vue.createApp({
   data() {
     return {
       boxModel: {
         margin: '1rem',
         padding: '1rem'
       },
       bgColor: {
         backgroundColor: 'red',
         color: '#fff' 
       }
     }
   }
 }).mount('#app')

參考

Vue 官網