lesson 32: dynamic styling
This commit is contained in:
parent
99be089ede
commit
5af511bc87
|
@ -1 +1,24 @@
|
||||||
"use strict";
|
"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");
|
||||||
|
|
|
@ -16,9 +16,9 @@
|
||||||
<h1>Vue Dynamic Styling</h1>
|
<h1>Vue Dynamic Styling</h1>
|
||||||
</header>
|
</header>
|
||||||
<section id="styling">
|
<section id="styling">
|
||||||
<div class="demo"></div>
|
<div class="demo" :style="{borderColor: boxASelected ? 'red' : '#ccc'}" @click="boxSelected('A')"></div>
|
||||||
<div class="demo"></div>
|
<div class="demo" @click="boxSelected('B')"></div>
|
||||||
<div class="demo"></div>
|
<div class="demo" @click="boxSelected('C')"></div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Reference in New Issue