From 82566920d286d8bdc09838cd42e8f2bafafb9381 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Wed, 10 Apr 2024 11:47:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(css):=20=E5=A2=9E=E5=8A=A0=20v-bind=20?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E5=8F=8A=E5=85=BC=E5=AE=B9=E6=80=A7=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/vue/README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/docs/vue/README.md b/docs/vue/README.md
index 2e4dafd0..31f00789 100644
--- a/docs/vue/README.md
+++ b/docs/vue/README.md
@@ -179,6 +179,56 @@ const doubleCount = computed<number>(() : number => {
 </style>
 ```
 
+### CSS 中的 v-bind()
+
+|App|Web|
+|:-:|:-:|
+|x  |x  |
+
+单文件组件的 `<style>` 标签支持使用 `v-bind` CSS 函数将 CSS 的值链接到动态的组件状态：
+
+```html
+<template>
+  <div class="text">hello</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      color: 'red'
+    }
+  }
+}
+</script>
+
+<style>
+.text {
+  color: v-bind(color);
+}
+</style>
+```
+
+这个语法同样也适用于 `<script setup>`，且支持 UTS 表达式 (需要用引号包裹起来)：
+
+```html
+<script setup>
+const theme = {
+  color: 'red'
+}
+</script>
+
+<template>
+  <p>hello</p>
+</template>
+
+<style scoped>
+p {
+  color: v-bind('theme.color');
+}
+</style>
+```
+
 ## 应用生命周期
 uni-app x 新增了 [onLastPageBackPress](../collocation/App.md#applifecycle) 和 [onExit](../collocation/App.md#applifecycle) 应用级生命周期，Android退出应用逻辑写在app.uvue里，新建项目的模板自动包含相关代码。如需修改退出逻辑，请直接修改相关代码。
 
-- 
GitLab