Reaktywny warunek w Vue
Sprawmy, aby warunek był reaktywny. Na przykład zróbmy tak, aby element chował się po kliknięciu przycisku. Załóżmy, że mamy następujący akapit:
<template>
<p v-if="visible">text</p>
</template>
Sprawmy, aby nasz akapit początkowo był pokazany:
data() {
return {
visible: true,
}
}
Stwórzmy teraz przycisk, po kliknięciu którego akapit będzie się ukrywał:
<template>
<button @click="hide">ukryj</button>
<p v-if="visible">text</p>
</template>
Powiązana metoda będzie zmieniać
właściwość visible na false,
tym samym powodując, że nasz
akapit się ukryje:
methods: {
hide: function() {
this.visible = false;
}
}
Dany jest akapit i przycisk. Niech akapit początkowo będzie ukryty. Stwórz przycisk, który będzie pokazywał akapit.
Dany jest akapit i dwa przyciski. Niech pierwszy przycisk pokazuje akapit, a drugi - ukrywa go.
Zmodyfikuj poprzednie zadanie tak, aby na ekranie zawsze był widoczny tylko jeden przycisk: jeśli akapit jest pokazany, to przycisk do ukrycia, a jeśli ukryty - to przycisk do pokazania.
