Reaktive Bedingung in Vue
Lassen Sie uns die Bedingung reaktiv gestalten. Lassen Sie uns zum Beispiel das Element beim Klicken auf einen Button ausblenden. Nehmen wir an, wir haben den folgenden Absatz:
<template>
<p v-if="visible">text</p>
</template>
Lassen Sie uns unseren Absatz zunächst anzeigen:
data() {
return {
visible: true,
}
}
Erstellen wir nun einen Button, bei dessen Klick der Absatz ausgeblendet wird:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Die gebundene Methode wird die Eigenschaft
visible auf false setzen,
was dazu führt, dass unser
Absatz ausgeblendet wird:
methods: {
hide: function() {
this.visible = false;
}
}
Gegeben sind ein Absatz und ein Button. Der Absatz soll zunächst ausgeblendet sein. Erstellen Sie einen Button, der den Absatz anzeigt.
Gegeben sind ein Absatz und zwei Buttons. Der erste Button soll den Absatz anzeigen, der zweite - ihn ausblenden.
Modifizieren Sie die vorherige Aufgabe so, dass immer nur einer der Buttons auf dem Bildschirm sichtbar ist: Wenn der Absatz angezeigt wird, ist der Button zum Ausblenden sichtbar, und wenn er ausgeblendet ist - der Button zum Anzeigen.
