樣式與 UI 控制 (CSS Vue 整合) - daniel-qa/Vue GitHub Wiki

基礎樣式操作

::after 偽元素 (Pseudo-element)

  • 內聯樣式

style="overflow:auto;" → 靜態 CSS

:style="{ overflow: 'auto', height: '200px' }" → Vue 綁定物件

:style="[ baseStyle, extraStyle ]" → Vue 綁定陣列

  • class 綁定

:class="{ active: isActive }" → 條件樣式

:class="[classA, classB]" → 動態組合

參考的分類 #

初學者教學 (Beginner's tutorials)

  • CSS 樣式基礎 (CSS styling basics)

  • CSS 文字樣式 (CSS text styling)

  • CSS 排版 (CSS layout)

CSS 參考 (CSS reference)

  • 模組 (Modules)

  • 屬性 (Properties)

  • 選擇器 (Selectors)

  • 組合器 (Combinators)

  • 偽類 (Pseudo-classes)

  • 偽元素 (Pseudo-elements)

  • at-規則 (@-rules)

  • 函式 (Functions)

  • 型別 (Types)

專題指引 (Guides)

  • 錨點定位 (Anchor positioning)

  • 動畫 (Animations)

  • 背景與邊框 (Backgrounds and borders)

  • Box 對齊 (Box alignment)