lesson 32: dynamic styling

basics-10-styling-starting-setup/app.js

@@ -1 +1,24 @@
 "use strict";
+
+const app = Vue.createApp({
+    data() {
+        return {
+            boxASelected: false,
+            boxBSelected: false,
+            boxCSelected: false,
+        };
+    },
+    methods: {
+        boxSelected(box) {
+            if (box === "A") {
+                this.boxASelected = true;
+            } else if (box === "B") {
+                this.boxBSelected = true;
+            } else if (box === "C") {
+                this.boxCSelected = true;
+            }
+        },
+    },
+});
+
+app.mount("#styling");

basics-10-styling-starting-setup/index.html

@@ -16,9 +16,9 @@
         <h1>Vue Dynamic Styling</h1>
     </header>
     <section id="styling">
-        <div class="demo"></div>
-        <div class="demo"></div>
-        <div class="demo"></div>
+        <div class="demo" :style="{borderColor: boxASelected ? 'red' : '#ccc'}" @click="boxSelected('A')"></div>
+        <div class="demo" @click="boxSelected('B')"></div>
+        <div class="demo" @click="boxSelected('C')"></div>
     </section>
 </body>