开始绑定样式的学习

2 years ago · c3c4699362
parent 812a51eede
commit c3c4699362
1 changed files with 70 additions and 44 deletions
--- a/10_绑定样式/绑定样式.html
+++ b/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;
        }
@ -34,27 +40,47 @@
 <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({
+    const vm = new Vue({
        el: "#root",
-      data:{
+        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(){
+        methods: {
+            changeStyle() {
                // this.style = "happy"
                const arr = ['happy', 'sad', 'normal']
-              const index = Math.floor(Math.random()*3)
+                const index = Math.floor(Math.random() * 3)
                this.style = arr[index]
            }
        }
    })
-  </script>
+</script>
 </html>