Reaktivitet i Vue-rammeverket
Enhver endring av data fra data
fører til en umiddelbar endring i visningen
av disse dataene på siden. Denne oppførselen
til Vue kalles reaktivitet.
La oss teste dette i praksis. Anta at vi har følgende egenskap:
data() {
return {
text: 'xxx',
}
}
La oss vise verdien av denne egenskapen:
<template>
{{ text }}
</template>
La oss lage en knapp som, når den klikkes på, vil endre vår egenskap:
<template>
{{ text }}
<button @click="change">text</button>
</template>
La oss nå skrive en metode som vil blir kalt ved klikk på knappen og endre egenskapen:
methods: {
change: function() {
this.text = 'yyy';
}
}
Hvis du setter sammen all koden og trykker på knappen - vil teksten på skjermen reaktivt endres til en annen.
Gitt egenskapen text. Vis innholdet
av denne egenskapen i et avsnitt.
Gitt en knapp. Gjør slik at ved klikk
på denne knappen endres verdien av egenskapen text
reaktivt til en annen.
Gitt to knapper. Gjør slik at ved klikk
på den første knappen endres verdien av egenskapen text
reaktivt til én verdi,
og ved klikk på den andre - til en annen.
