add a watcher example
This commit is contained in:
parent
c7ad6bfe14
commit
97812b321b
|
@ -3,15 +3,33 @@ const app = Vue.createApp({
|
|||
return {
|
||||
counter: 0,
|
||||
name: "",
|
||||
lastName: "",
|
||||
fullName: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fullName() {
|
||||
if (this.name === "") {
|
||||
return "";
|
||||
watch: {
|
||||
name(value) {
|
||||
if (value === "") {
|
||||
this.fullName = "";
|
||||
} else {
|
||||
this.fullName = value + " " + this.lastName;
|
||||
}
|
||||
return this.name + " " + "Muster";
|
||||
},
|
||||
lastName(value) {
|
||||
if (value === "") {
|
||||
this.fullName = "";
|
||||
} else {
|
||||
this.fullName = this.name + " " + value;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// fullName() {
|
||||
// if (this.name === "") {
|
||||
// return "";
|
||||
// }
|
||||
// return this.name + " " + "Muster";
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
setName(event) {
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
<button v-on:click="reduce(5)">Subtract 5</button>
|
||||
<p>Result: {{ counter }}</p>
|
||||
<input type="text" v-model="name">
|
||||
<input type="text" v-model="lastName">
|
||||
<button v-on:click="resetInput">Reset Input</button>
|
||||
<p>Your Name: {{ fullName }}</p>
|
||||
</section>
|
||||
|
|
Reference in New Issue