开始绑定样式的学习

10_绑定样式/绑定样式.html

@@ -9,22 +9,28 @@
             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;
         }
@@ -36,16 +42,36 @@
 </body>
 <div id="root">
     <div class="basic" :class="style" @click="changeStyle">{{name}}</div>
-      <div class="basic" :class="classArr" @click="changeStyle">{{name}}</div>
+    <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({
+    const vm = new Vue({
         el: "#root",
         data: {
             name: '测试',
             style: "normal",
-          classArr: ["test1", "test2", "test3"]
+            classArr: ["test1", "test2", "test3"],
+            classObj: {
+                test1: true,
+                test2: true
+            },
+            styleObj: {
+                fontSize: '40px'
+            },
+            styleObj2: {
+                color: 'red'
+            },
+            styleArr: [{
+                fontSize: '40px'
+            },
+                {
+                    color: 'red'
+                }
+            ]
         },
         methods: {
             changeStyle() {