EP6 - 類別與風格綁定

更新於 2024/09/14發佈於 2024/09/14閱讀時間約 1 分鐘

Class and Style Bindings 前端的框架，
看到這個標題還真的不知道會怎麼綁定？
有時候覺得處理Style覺得蠻麻煩的～到處都有重複內容www
不知道Class跟Style可以去翻翻 html ccs

資料綁定的一個常見需求是操作元素的類別列表(class list)和內聯樣式(inline styles)。由於 class 和 style 都是屬性，我們可以使用 v-bind 來動態地賦予它們一個字串值，就像對其他屬性一樣。然而，嘗試使用字串串聯來生成這些值可能會讓人感到厭煩且容易出錯。因此，Vue 提供了當 v-bind 與 class 和 style 一起使用時的特殊增強功能。除了字串之外，這些表達式也可以評估為物件或陣列。

綁定 HTML 類別 - Binding HTML Classes

又來看片摟！

綁定至物件 - Binding to Objects

我們可以傳遞一個物件給 :class（即 v-bind:class 的縮寫）來動態切換類別：

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

上述語法表示 active 類別的存在將由資料屬性 isActive 的真假來決定。

你可以在物件中包含更多字段來切換多個類別。此外，:class 指令也可以與普通的 class 屬性共存。因此，給定以下狀態：

const isActive = ref(true)
const hasError = ref(false)

以及以下模板：

<template>
  <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  ></div>
</template>

它將渲染為：

<template>
  <div class="static active"></div>
</template>

當 isActive 或 hasError 改變時，類別列表將相應更新。例如，如果 hasError 變為 true，類別列表將變為 "static active text-danger"。

綁定的物件不必是內聯的(inline)：

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

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

這將渲染為：

<template>
  <div class="active"></div>
</template>

我們也可以綁定到返回物件的計算屬性上。這是一種常見且強大的模式：

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

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

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

綁定至陣列 - Binding to Arrays

我們可以將 :class 綁定到一個陣列，以應用一組類別：

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

<template>
  <div :class="[activeClass, errorClass]"></div>
</template>

這將渲染為：

<template>
  <div class="active text-danger"></div>
</template>

如果你想在列表中有條件地切換類別，可以使用三元運算符來實現：

<template>
  <div :class="[isActive ? activeClass : '', errorClass]"></div>
</template>

這樣將始終應用 errorClass，但只有當 isActive 為真值時才會應用 activeClass。

然而，如果你有多個條件類別，這樣寫會顯得有點冗長。因此，我們也可以在陣列語法中使用物件語法：

<template>
  <div :class="[{ [activeClass]: isActive }, errorClass]"></div>
</template>

與元件一起使用 - With Components

本節假設您已了解元件的知識。若不熟悉，可以跳過本節並稍後再回來。

當您在具有單一根元素的元件上使用 class 屬性時，這些類別會添加到元件的根元素，並與已存在的任何類別合併。

例如，如果我們有一個名為 MyComponent 的元件，其模板如下：

<!-- 子元件模板 -->
<p class="foo bar">Hi!</p>

然後在使用該元件時添加一些類別：

<!-- 使用元件時 -->
<MyComponent class="baz boo" />

渲染的 HTML 將是：

<p class="foo bar baz boo">Hi!</p>

類別綁定也是如此：

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

當 isActive 為真時，渲染的 HTML 將是：

<p class="foo bar active">Hi!</p>

如果您的元件具有多個根元素，則需要定義哪個元素會接收這些類別。您可以使用 $attrs 元件屬性來實現：

<!-- 使用 $attrs 的 MyComponent 模板 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

這表示 MyComponent 有兩個根元素： 和 。在這個範例中，$attrs.class 會獲取從父組件傳遞下來的 class 屬性值，並應用到  元素上。 元素則不會受到影響。

<MyComponent class="baz" />

class="baz" 會被傳遞給 MyComponent，並應用到  元素上。最終渲染的 HTML 會是：

將渲染為：

<p class="baz">Hi!</p>
<span>This is a child component</span>

在這個例子中，class="baz" 被應用到  元素，而  元素保持原樣，這樣您就能控制類別應用的位置，尤其是當元件有多個根元素時。

您可以在“Fallthrough Attributes”部分中了解更多有關元件屬性繼承的內容。

綁定內聯樣式 - Binding Inline Styles

綁定到物件 - Binding to Objects

:style 支援綁定到 JavaScript 物件值，它對應於 HTML 元素的 style 屬性：

const activeColor = ref('red')
const fontSize = ref(30)

模板：

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

雖然建議使用 camelCase 鍵，但 :style 也支援使用 kebab-case 的 CSS 屬性鍵（對應於實際 CSS 中的寫法），例如：

<div :style="{ 'font-size': fontSize + 'px' }"></div>

將樣式物件直接綁定通常是一個好主意，這樣模板會更清晰：

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

模板：

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

物件樣式綁定通常與返回物件的計算屬性一起使用。

綁定到陣列 - Binding to Arrays

將 :style 綁定到多個樣式物件的矩陣。這些物件將被合併並應用於同一元素：

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

自動前綴 - Auto-prefixing

當您在 :style 中使用需要供應商前綴的 CSS 屬性時，Vue 會自動添加適當的前綴。Vue 通過在運行時檢查當前瀏覽器支持的樣式屬性來完成這一點。如果瀏覽器不支持特定屬性，則會測試各種前綴變體，以嘗試找到一個被支持的變體。

在 Vue 中，當你使用需要供應商前綴的 CSS 屬性時，Vue 會自動添加這些前綴。供應商前綴（如 -webkit-、-moz-、-ms- 等）是用來確保 CSS 屬性在不同瀏覽器中能夠正常運行的。

多個值 - Multiple Values

您可以向樣式屬性提供多個（已前綴的）值的陣列，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

這將僅渲染瀏覽器支持的最後一個值。例如，這會在支持未前綴版本的 flexbox 的瀏覽器中渲染 display: flex。

在這個例子中，display 屬性被設置為一個陣列，包含了三個不同的值：

-webkit-box
-ms-flexbox
flex

瀏覽器會使用支持的最後一個值。在這個例子中，flex 是現代瀏覽器支持的標準屬性，因此 Vue 會將其應用到元素上。對於舊版本的瀏覽器，會根據支持情況選擇適當的前綴版本。

補充：前綴（Vendor Prefixes）

前綴（Vendor Prefixes）是一種用來確保新興或尚在實驗階段的 CSS 屬性在不同瀏覽器中能夠正常運行的技術。不同的瀏覽器廠商（如 Google、Mozilla、Apple、Microsoft）會在他們的瀏覽器中實現 CSS 標準，但在標準正式確定之前，這些實現通常需要使用前綴來區分實驗性功能。

常見的前綴

-webkit-：由 Apple 和 Google 使用，主要應用於 WebKit 和 Blink 內核的瀏覽器，如 Safari 和 Chrome。
-moz-：由 Mozilla 使用，主要應用於 Firefox 瀏覽器。
-ms-：由 Microsoft 使用，主要應用於 Internet Explorer 和 Edge 瀏覽器。
-o-：由 Opera 使用，但 Opera 現在已經基於 Blink 內核，這個前綴已經不常見了。

示例

假設你想使用 CSS3 的 flex 屬性來創建彈性佈局。在早期版本的瀏覽器中，flex 屬性可能需要使用前綴來支持：

/* 標準屬性 */
display: flex;

/* 前綴屬性 */
display: -webkit-flex; /* Safari 和早期版本的 Chrome */
display: -moz-flex;    /* Firefox */
display: -ms-flex;     /* Internet Explorer 10 */

在這個例子中，display: flex; 是標準屬性，而其他三個帶有前綴的屬性用來確保在不同瀏覽器中的兼容性。

為什麼需要前綴

實驗功能：瀏覽器中的新 CSS 功能可能尚未成為標準，瀏覽器製造商會使用前綴來測試和實驗這些功能。
兼容性：不同瀏覽器可能實現了不同的功能版本，使用前綴可以確保功能在不同環境中的一致性。
逐步支持：隨著 CSS 標準的演進，前綴屬性會被標準屬性取代，最終前綴會被移除。

現代做法

現在，許多現代瀏覽器已經支持標準 CSS 屬性，不再需要使用前綴。開發者可以通過工具（如 PostCSS 和 Autoprefixer）自動添加必要的前綴，簡化開發過程。

這章節蠻不錯的～原來可以這樣綁定Class跟Style
動態的切換這些類別跟style，
以前的寫法可能都要寫一大堆Javascript來做切換～
這框架似乎省去很多麻煩啊～還是要多來練習一下

2會員

71內容數

分享生活趣事～

留言0

查看全部

發表第一個留言支持創作者！

卡關的人生的其他內容

EP5 - 計算屬性

本文介紹了計算屬性（Computed Properties）的基本概念及其在前端框架中的應用，特別是 Vue.js。計算屬性允許我們根據其他響應式數據進行計算並且自動跟蹤依賴，避免不必要的重複計算。本文還探討瞭如何使用可寫入的計算屬性，以及最佳實踐建議，以確保性能與代碼的可讀性。

#學習 #文件 #開發

EP4 - 反應性基礎

本文深入探討 Vue.js 中的響應式原理，特別是 Composition API 中的 ref() 和 reactive() 使用。通過示例分析這些概念，並比較二者的優缺點，幫助開發者更清晰地理解響應式狀態的管理與最佳實踐。瞭解如何有效地聲明和管理響應式狀態，對於提升 Vue 開發的效率至關重要。

#文件 #開發 #學習