Reaktiewe Voorwaarde in Vue
Kom ons maak die voorwaarde reaktief. Laat ons byvoorbeeld sorg dat 'n element weggesteek word wanneer 'n knoppie gedruk word. Kom ons sê ons het die volgende paragraaf:
<template>
<p v-if="visible">teks</p>
</template>
Kom ons sorg dat ons paragraaf aanvanklik sigbaar is:
data() {
return {
visible: true,
}
}
Kom ons maak nou 'n knoppie wat, wanneer daarop gedruk word, die paragraaf sal wegsteek:
<template>
<button @click="hide">steek weg</button>
<p v-if="visible">teks</p>
</template>
Die gebinde metode sal die
eienskap visible na false verander,
wat ons paragraaf sal laat verdwyn:
methods: {
hide: function() {
this.visible = false;
}
}
Daar is 'n paragraaf en 'n knoppie. Laat die paragraaf aankanklik weggesteek wees. Maak 'n knoppie wat die paragraaf sal wys.
Daar is 'n paragraaf en twee knoppies. Laat die eerste knoppie die paragraaf wys, en die tweede een - dit wegsteek.
Wysig die vorige taak sodat altyd net een van die knoppies op die skerm sigbaar is: as die paragraaf gewys word, dan die wegsteek-knoppie, en as dit weggesteek is - dan die wys-knoppie.
