box-shadow 添加动态设置 none 及 非法值测试例

pages/CSS/box-shadow/box-shadow.uvue

@@ -48,133 +48,142 @@
       <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 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 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 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 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 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 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 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 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 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 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="
+          <view class="common" style="
               border-radius: 62px;
               box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-            "
-          ></view>
+            "></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 {
+  .common {
     width: 125px;
     height: 125px;
     background-color: brown;
-}
+  }
 
-.backgroundview {
+  .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>