computed properties are as the name says computed
since the :class parameter awaits true and false I can compute those directly inside the computed properties.
This commit is contained in:
parent
a0dc7b7e6d
commit
6108d09c4c
|
@ -3,28 +3,24 @@
|
||||||
const app = Vue.createApp({
|
const app = Vue.createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
user1: false,
|
|
||||||
user2: false,
|
|
||||||
inputClass: "",
|
inputClass: "",
|
||||||
paragraphVisible: true,
|
paragraphVisible: true,
|
||||||
paragraphHidden: false,
|
|
||||||
inputColor: "",
|
inputColor: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classFromUserInput() {
|
classFromUserInput() {
|
||||||
return {
|
return {
|
||||||
user1: this.user1,
|
user1: this.inputClass === "user1",
|
||||||
user2: this.user2,
|
user2: this.inputClass === "user2",
|
||||||
visible: this.paragraphVisible,
|
visible: this.paragraphVisible,
|
||||||
hidden: this.paragraphHidden,
|
hidden: !this.paragraphVisible,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleParagraphVisibility() {
|
toggleParagraphVisibility() {
|
||||||
this.paragraphVisible = !this.paragraphVisible;
|
this.paragraphVisible = !this.paragraphVisible;
|
||||||
this.paragraphHidden = !this.paragraphHidden;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Reference in New Issue