开始绑定样式的学习

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

@@ -22,10 +22,11 @@
           background-color: blueviolet;
       }
       .test2 {
-          background-color: chartreuse;
+          border-color: brown;
+          border-width: medium;
       }
       .test3 {
-          background-color: brown;
+          border-radius: 20px;
       }
     </style>
     <script type="text/javascript" src="../vue.js"></script>
@@ -34,7 +35,8 @@
 
 </body>
   <div id="root">
-    <div class="basic">{{name}}</div>
+    <div class="basic" :class="style" @click="changeStyle">{{name}}</div>
+      <div class="basic" :class="classArr" @click="changeStyle">{{name}}</div>
   </div>
   <script type="text/javascript">
     Vue.config.productionTip = false
@@ -42,6 +44,16 @@
       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]
+          }
       }
     })
   </script>