Reaktiviteit van skikkings in Vue
Reaktiviteit tree selfs in werking wanneer skikkings wat deur v-for vertoon word, verander.
Laat ons byvoorbeeld maak dat 'n nuwe element reaktief by 'n skikking gevoeg word wanneer 'n knoppie gedruk word, en dat die veranderinge onmiddellik op die skerm weerspieël word.
Laat ons die bogenoemde implementeer. Kom ons sê ons het 'n skikking:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Laat ons die elemente van hierdie skikking in 'n lus vertoon:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Kom ons maak 'n knoppie wat, wanneer dit gedruk word, 'n nuwe element by die skikking voeg:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Kom ons implementeer die ooreenstemmende metode:
methods: {
add: function() {
this.arr.push('xxx');
}
}
Gegee 'n knoppie. Gegee 'n skikking. Vertoon die elemente van hierdie skikking as 'n lys ul. Maak seker dat wanneer die knoppie gedruk word, 'n nuwe punt by die einde van hierdie lys gevoeg word.
Gegee 'n knoppie. Gegee 'n skikking. Vertoon die elemente van hierdie skikking as 'n lys ul. Maak seker dat elke keer as die knoppie gedruk word, die eerste punt van die lys verwyder word.
Gegee 'n knoppie. Gegee 'n skikking. Vertoon die elemente van hierdie skikking as 'n lys ul. Maak seker dat elke keer as die knoppie gedruk word, die laaste punt van die lys verwyder word.
Gegee 'n knoppie. Gegee 'n skikking. Vertoon die elemente van hierdie skikking as 'n lys ul. Maak seker dat elke keer as die knoppie gedruk word, die voorlaaste punt van die lys verwyder word.
Gegee 'n knoppie. Gegee 'n skikking. Vertoon die elemente van hierdie skikking as 'n lys ul. Maak seker dat wanneer die knoppie gedruk word, die punte van die lys gesorteer word.
Gegee 'n knoppie. Gegee 'n skikking. Vertoon die elemente van hierdie skikking as 'n lys ul. Maak seker dat wanneer die knoppie gedruk word, die punte van die lys in omgekeerde volgorde geplaas word.
Uitsonderings
As gevolg van JavaScript-beperkings, kan Vue nie die volgende veranderinge in 'n skikking waarneem nie: die direkte instelling van 'n element volgens indeks: items[sleutel] = nuweWaarde en die eksplisiete verandering van die lengte van die skikking, byvoorbeeld: items.length = nuweLengte.
