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:
Andreas Zweili 2021-01-18 23:35:06 +01:00
parent a0dc7b7e6d
commit 6108d09c4c
1 changed files with 3 additions and 7 deletions

View File

@ -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;
}, },
}, },
}); });