lession 34: computed properties in classes
This commit is contained in:
parent
043e32cb67
commit
b3b6630e4b
|
@ -8,6 +8,17 @@ const app = Vue.createApp({
|
||||||
boxCSelected: false,
|
boxCSelected: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
classesBoxA() {
|
||||||
|
return { active: this.boxASelected };
|
||||||
|
},
|
||||||
|
classesBoxB() {
|
||||||
|
return { active: this.boxBSelected };
|
||||||
|
},
|
||||||
|
classesBoxC() {
|
||||||
|
return { active: this.boxCSelected };
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
boxSelected(box) {
|
boxSelected(box) {
|
||||||
if (box === "A") {
|
if (box === "A") {
|
||||||
|
|
|
@ -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" :class="{active: boxASelected}" @click="boxSelected('A')"></div>
|
<div class="demo" :class="classesBoxA" @click="boxSelected('A')"></div>
|
||||||
<div class="demo" :class="{active: boxBSelected}" @click="boxSelected('B')"></div>
|
<div class="demo" :class="classesBoxB" @click="boxSelected('B')"></div>
|
||||||
<div class="demo" :class="{active: boxCSelected}" @click="boxSelected('C')"></div>
|
<div class="demo" :class="classesBoxC" @click="boxSelected('C')"></div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
Reference in New Issue