From e26d8605f213baac120568e5e4a7e7c72abfba51 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Wed, 10 Apr 2024 14:13:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(v-bind-style):=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E6=A8=A1=E7=89=88=E4=B8=AD=E7=9A=84=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E4=B8=BAtext?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/vue/README.md | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/docs/vue/README.md b/docs/vue/README.md
index 31f00789..5509a259 100644
--- a/docs/vue/README.md
+++ b/docs/vue/README.md
@@ -179,6 +179,24 @@ const doubleCount = computed<number>(() : number => {
 </style>
 ```
 
+### CSS Modules
+
+|App|Web|
+|:-:|:-:|
+|x  |4.0|
+
+一个 `<style module>` 标签会被编译为 `CSS Modules` 并且将生成的 CSS class 作为 `$style` 对象暴露给组件:
+
+<template>
+  <view :class="$style.red">This should be red</view>
+</template>
+
+<style module>
+.red {
+  color: red;
+}
+</style>
+
 ### CSS 中的 v-bind()
 
 |App|Web|
@@ -189,7 +207,7 @@ const doubleCount = computed<number>(() : number => {
 
 ```html
 <template>
-  <div class="text">hello</div>
+  <text class="text">hello</text>
 </template>
 
 <script>
@@ -219,11 +237,11 @@ const theme = {
 </script>
 
 <template>
-  <p>hello</p>
+  <text class="view">hello</text>
 </template>
 
 <style scoped>
-p {
+.text {
   color: v-bind('theme.color');
 }
 </style>
-- 
GitLab