From f40b00c8eec3f325fee0ffa84e9824e9047c6824 Mon Sep 17 00:00:00 2001
From: Xicheng Guo <xicheng_guo@wistron.com>
Date: Thu, 18 Jul 2024 15:33:18 +0800
Subject: [PATCH] add style binding md

---
 src/.vitepress/sidebars/vue.yaml              |  7 +++++
 .../vue/template-syntax/style-binding.md      | 27 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/frontend/vue/template-syntax/style-binding.md

diff --git a/src/.vitepress/sidebars/vue.yaml b/src/.vitepress/sidebars/vue.yaml
index ab6fec4..151eeed 100644
--- a/src/.vitepress/sidebars/vue.yaml
+++ b/src/.vitepress/sidebars/vue.yaml
@@ -18,6 +18,13 @@
                 link: /frontend/vue/template-syntax/attribute-binding#绑定布尔值属性
               - text: 绑定对象属性
                 link: /frontend/vue/template-syntax/attribute-binding#绑定对象属性
+          - text: 样式绑定
+            link: /frontend/vue/template-syntax/style-binding
+            items:
+              - text: class 类样式绑定
+                link: /frontend/vue/template-syntax/style-binding#class-类样式绑定
+              - text: style 内联样式绑定
+                link: /frontend/vue/template-syntax/style-binding#style-内联样式绑定
       # - text: 核心概念
       #   items:
       #     - text: 模版语法
diff --git a/src/frontend/vue/template-syntax/style-binding.md b/src/frontend/vue/template-syntax/style-binding.md
new file mode 100644
index 0000000..0b5987d
--- /dev/null
+++ b/src/frontend/vue/template-syntax/style-binding.md
@@ -0,0 +1,27 @@
+# 样式绑定
+
+Vue 专门为 v-bind 的用法绑定 class 和 style 提供了特殊的功能增强，表达式的值支持字符串、对象和数组。
+
+## class 类样式绑定
+
+`:class`（ `v-bind:class` 的缩写）
+
+### 绑定对象
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ClassBindObj.vue
+
+### 绑定数组
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/ClassBindArr.vue
+
+## style 内联样式绑定
+
+`:style`（ `v-bind:style` 的缩写）
+
+### 绑定对象
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/StyleBindObj.vue
+
+### 绑定数组
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/StyleBindArr.vue