From c3c4699362e4f54e0c9e16039f45349f28a4f0b3 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Wed, 28 Dec 2022 09:52:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=A7=8B=E7=BB=91=E5=AE=9A=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84=E5=AD=A6=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 10_绑定样式/绑定样式.html | 114 ++++++++++++++++++------------
 1 file changed, 70 insertions(+), 44 deletions(-)
diff --git a/10_绑定样式/绑定样式.html b/10_绑定样式/绑定样式.html
index 4d9da69..d26a2e9 100644
--- a/10_绑定样式/绑定样式.html
+++ b/10_绑定样式/绑定样式.html
@@ -4,57 +4,83 @@
     <meta charset="UTF-8">
     <title>样式绑定</title>
     <style>
-      .basic {
-        width: 400px;
-        height: 100px;
-        border: 1px solid black;
-      }
-      .happy {
-          background-color: bisque;
-      }
-      .sad {
-          background-color: blue;
-      }
-      .normal {
-          background-color: orange;
-      }
-      .test1 {
-          background-color: blueviolet;
-      }
-      .test2 {
-          border-color: brown;
-          border-width: medium;
-      }
-      .test3 {
-          border-radius: 20px;
-      }
+        .basic {
+            width: 400px;
+            height: 100px;
+            border: 1px solid black;
+        }
+
+        .happy {
+            background-color: bisque;
+        }
+
+        .sad {
+            background-color: blue;
+        }
+
+        .normal {
+            background-color: orange;
+        }
+
+        .test1 {
+            background-color: blueviolet;
+        }
+
+        .test2 {
+            border-color: brown;
+            border-width: medium;
+        }
+
+        .test3 {
+            border-radius: 20px;
+        }
     </style>
     <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 
 </body>
-  <div id="root">
+<div id="root">
     <div class="basic" :class="style" @click="changeStyle">{{name}}</div>
-      <div class="basic" :class="classArr" @click="changeStyle">{{name}}</div>
-  </div>
-  <script type="text/javascript">
+    <div class="basic" :class="classArr">{{name}}</div>
+    <div class="basic" :class="classObj">{{name}}</div>
+    <div class="basic" :style="styleObj">{{name}}</div>
+    <div class="basic" :style="styleArr">{{name}}</div>
+</div>
+<script type="text/javascript">
     Vue.config.productionTip = false
-    new Vue({
-      el: "#root",
-      data:{
-          name: '测试',
-          style: "normal",
-          classArr: ["test1", "test2", "test3"]
-      },
-      methods:{
-          changeStyle(){
-            // this.style = "happy"
-              const arr = ['happy', 'sad', 'normal']
-              const index = Math.floor(Math.random()*3)
-              this.style = arr[index]
-          }
-      }
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            name: '测试',
+            style: "normal",
+            classArr: ["test1", "test2", "test3"],
+            classObj: {
+                test1: true,
+                test2: true
+            },
+            styleObj: {
+                fontSize: '40px'
+            },
+            styleObj2: {
+                color: 'red'
+            },
+            styleArr: [{
+                fontSize: '40px'
+            },
+                {
+                    color: 'red'
+                }
+            ]
+        },
+        methods: {
+            changeStyle() {
+                // this.style = "happy"
+                const arr = ['happy', 'sad', 'normal']
+                const index = Math.floor(Math.random() * 3)
+                this.style = arr[index]
+            }
+        }
     })
-  </script>
+</script>
 </html>
\ No newline at end of file
