开始绑定样式的学习

2 years ago · c3c4699362
parent 812a51eede
commit c3c4699362
1 changed files with 70 additions and 44 deletions
--- 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>