前言

今天要來講解v-bind的應用，以及它與class和style的綁定：

資料綁定提供了在HTML元素中靈活操作CSS類別列表和內聯樣式的解決方案，這是一個常見的需求。由於這些操作都涉及到屬性，因此我們可以使用v-bind來處理它們，只需要計算最終的字符串即可。然而，直接處理字符串可能變得繁瑣且容易出錯。
因此，在Vue中，針對class和style的v-bind使用了特殊的擴展。這不僅可以綁定字符串，還可以綁定對象或數組表達式，提供了更靈活的選擇。

v-bind 屬性綁定

v-bind指令可以用來綁定元素的普通屬性，其表達式結果會作為屬性的值。

<!-- 綁定屬性 -->
<button v-bind:disabled="isButtonDisabled">Button</button> 

<!-- 綁定表達式 -->
<div v-bind:id="'list-' + id"></div>

也可以將v-bind:縮寫成:

<!-- 綁定屬性 -->
<button :disabled="isButtonDisabled">Button</button> 

<!-- 綁定表達式 -->
<div :id="'list-' + id"></div>

v-bind 與 Class 綁定

綁定對象

• 使用 :class（或 v-bind:class 的簡寫）可以通過傳遞對象來動態切換CSS類別：

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

這會根據 isActive 的真假值來決定是否應用 active class。

• :class指令也可以跟一般的class屬性共存
• 也可以直接綁定一個對象

const classObject = reactive({
  active: true,
  'text-danger': false
})

<div :class="classObject"></div>

• 可以綁定一個返回對象的計算屬性

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

<div :class="classObject"></div>

綁定數組

可以傳遞一個class名稱的數組，將列表中指定的所有class添加到元素上。

const activeClass = ref('active')
const errorClass = ref('text-danger')

<div v-bind:class="[activeClass, errorClass]"></div>

v-bind 與 Style 綁定

v-bind與style綁定的用法與class類似。

對象語法

可以傳遞一個對象，動態設置樣式屬性。

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：
來源：官方文件

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

• 通常推薦直接綁定一個樣式對象，使模板更加簡潔

const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

<div :style="styleObject"></div>

綁定數組

可以傳遞多個style對象的數組。

<div v-bind:style="[baseStyles, overridingStyles]"></div>

自動前綴

在 :style 綁定中使用某些 CSS 屬性時，Vue 會自動添加適當的前綴。
例如:

<div :style="{ transform: 'rotate(30deg)' }"></div>

這裡的 transform 屬性在不同瀏覽器需要添加不同的前綴，如 -webkit-transform。
Vue 在編譯時會檢測當前瀏覽器支持的 CSS 屬性前綴，並自動添加合適的前綴。
上例在編譯後會自動添加相應的 -webkit-transform 屬性:

div {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg); 
}

Vue 會根據瀏覽器支持情況，優先使用不帶前綴的原生屬性，如果不支持再使用帶前綴的版本。

實作

程式碼

<template>

  <div :id="[isBg ? 'bg' : '']">
  <div>
    <p>請寫入email</p>
    <input v-model="formState.email" :placeholder="formState.email" />
    <p>請寫入名字</p>
    <input v-model="formState.name" />

    <p :class="{ 'err' :lengthCheck}">寫入{{ formState.name.length }}文字中...</p>

    <div v-if="lengthCheck">
    <p class="err">請輸入四以上的文字</p>
  </div>
  <button @click.prevent="toggleBg">換背景顏色</button>
  </div>
  </div>
</template>

<script setup>
import { reactive, computed , ref } from 'vue'

const isBg = ref(false)

const formState  = reactive({
  email:null,
  name:"",
})

const  lengthCheck = computed(()=> {
  return formState.name.length > 3 ?  false :true
})

const toggleBg = ()=> {
  isBg.value = !isBg.value
}
</script>

<style scoped>

.err {
  color: red;
}

#bg {
  background-color: blue;
}

</style>

總結

今天的內容就到這裡。之後我們會再詳細的解講解Vue事件處理（監聽事件）的部分。

參考資料

1. 官方文件
2. [Vue入門] クラスとスタイルのバインディング