From 812a51eede95174ea49551ffa7c794f1381f1296 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Tue, 6 Dec 2022 09:40:14 +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 | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/10_绑定样式/绑定样式.html b/10_绑定样式/绑定样式.html
index 8426d02..4d9da69 100644
--- a/10_绑定样式/绑定样式.html
+++ b/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,14 +35,25 @@
 
 </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
     new Vue({
       el: "#root",
       data:{
-        name: '测试',
+          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>