diff --git a/pages/CSS/border/border-style.uvue b/pages/CSS/border/border-style.uvue
index 86ae698fd16c85b0493b6ffaebcb5088c7d2f28b..95c8ef1b5ef78b5ce3941b2418f479296bf9fe07 100644
--- a/pages/CSS/border/border-style.uvue
+++ b/pages/CSS/border/border-style.uvue
@@ -58,12 +58,39 @@
           style="border-style: none; border-width: 5px;"
         ></view>
       </view>
+
+      <view @click="changeBorderStyle">
+        <text>border-style: 点击切换</text>
+        <view
+          class="common"
+          :style="borderStyle"
+        ></view>
+      </view>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
+<script>
+	export default {
+		data() {
+			return {
+        isSolid : false,
+				borderStyle: "border-style: none; border-width: 5px;",
+			}
+		},
+    methods: {
+      changeBorderStyle() {
+        this.isSolid = !this.isSolid;
+        const solid = "border-style: solid; border-width: 5px;";
+        const none = "";
+        this.borderStyle = this.isSolid ? solid : none;
+      }
+    }
+	}
+</script>
+
 <style>
 .common {
   width: 250px;