diff --git a/pages/CSS/box-shadow/box-shadow.uvue b/pages/CSS/box-shadow/box-shadow.uvue
index 6e0789ac7d0a921cbe7cd3a63a3d61512c3d983b..6f6651a72b4d35e88023dce258900e12c74454d8 100644
--- a/pages/CSS/box-shadow/box-shadow.uvue
+++ b/pages/CSS/box-shadow/box-shadow.uvue
@@ -1,180 +1,189 @@
-<template>
-  <!-- #ifdef APP -->
-  <scroll-view style="flex: 1">
-    <!-- #endif -->
-    <view style="flex-grow: 1">
-      <view>
-        <text>box-shadow: 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 5px 10px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 10px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 5px 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: -5px -5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: -5px -5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 5px black</text>
-        <view class="backgroundview">
-          <view class="common" style="box-shadow: inset 5px 5px black"></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 10px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset 5px 10px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset 5px 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset 5px 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: inset -5px -5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: inset -5px -5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 10px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 10px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 5px 5px 5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: -5px -5px 5px black</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="border-radius: 62px; box-shadow: -5px -5px 5px black"
-          ></view>
-        </view>
-      </view>
-
-      <view>
-        <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
-        <view class="backgroundview">
-          <view
-            class="common"
-            style="
-              border-radius: 62px;
-              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-            "
-          ></view>
-        </view>
-      </view>
-    </view>
-    <!-- #ifdef APP -->
-  </scroll-view>
-  <!-- #endif -->
-</template>
-
-<style>
-.common {
-  width: 125px;
-  height: 125px;
-  background-color: brown;
-}
-
-.backgroundview {
-  width: 250px;
-  height: 250px;
-  background-color: white;
-  justify-content: center;
-  align-items: center;
-}
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view style="flex-grow: 1">
+      <view>
+        <text>box-shadow: 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: inset -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: inset -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+        <view class="backgroundview">
+          <view class="common" style="box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4)"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 10px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 10px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 5px 5px 5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: 5px 5px 5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: -5px -5px 5px black</text>
+        <view class="backgroundview">
+          <view class="common" style="border-radius: 62px; box-shadow: -5px -5px 5px black"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>circle: box-shadow: 0px 1px 3px rgba(0,0,0,0.4)</text>
+        <view class="backgroundview">
+          <view class="common" style="
+              border-radius: 62px;
+              box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
+            "></view>
+        </view>
+      </view>
+
+      <view>
+        <text>点击动态切换 box-shadow: none</text>
+        <view class="backgroundview" @click="changed">
+          <view :class="['common', disabled ? 'disabledShadow' : 'shadow']"></view>
+        </view>
+      </view>
+
+      <view>
+        <text>点击动态切换 box-shadow: 非法值</text>
+        <view class="backgroundview" @click="changed">
+          <view :class="['common', disabled ? 'invalidShadow' : 'shadow']"></view>
+        </view>
+      </view>
+
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        disabled: false
+      }
+    },
+    methods: {
+      changed() {
+        this.disabled = !this.disabled
+      }
+    },
+  }
+</script>
+
+<style>
+  .common {
+    width: 125px;
+    height: 125px;
+    background-color: brown;
+  }
+
+  .backgroundview {
+    width: 250px;
+    height: 250px;
+    background-color: white;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .shadow {
+    box-shadow: 5px 5px black;
+  }
+
+  .disabledShadow {
+    box-shadow: none;
+  }
+
+  .invalidShadow {
+    box-shadow: abcd;
+  }
 </style>