Phenquestions
Vue.js is een zeer indrukwekkend en reactief JavaScript-front-end framework dat wordt gebruikt om snel en gemakkelijk front-end websites te ontwikkelen. Dit bericht leert over de horloge-eigenschap die een van de meest fundamentele concepten is.
Vue.js biedt een watch-eigenschap om een variabele te bekijken, en bij de wijziging van die variabele kunnen we een functie uitvoeren zodat we dynamische interactie kunnen maken. Laten we een voorbeeld proberen en wat dynamische interactie hebben met de eigenschap Vue Watch.
Voorbeeld
We zullen eerst proberen een variabele te wijzigen met een klik op een knop, en dan zullen we met behulp van de eigenschap watch die variabele bekijken en een andere variabele wijzigen om de dynamische wijzigingen op de webpagina aan te brengen.
Neem eerst aan dat we twee variabelen hebben.gegevens()
retour
buttonBool: true,
kleur rood"
En we hebben de variabele "buttonBool" gebonden met een knopelement in de sjabloon.
Dit is een testpagina
We willen de achtergrondkleur van een, laten we zeggen, een divisie wijzigen met een klik op de knop. Maak dus eerst een div in de sjabloon.
Dit is een testpagina
Laten we nu eerst een watch-eigenschap maken en de status van de "color" -variabele wijzigen bij de wijziging van de "buttonBool" -variabele.
kijk maar:knopBool()
dit.kleur = !dit.kleur;
Oke! De laatste stap die overblijft is om de klassen van de div te wijzigen bij de verandering van de kleurvariabele. Laten we dat dus doen door de klassebindingsfunctie van Vue . te gebruiken.js.
Dit is een testpagina
Hier heb ik zojuist de klasse "rood" toegewezen als de status van de "kleur" -variabele waar is, anders "groen" als de staat van de kleurvariabele "onwaar" is en de "box" -klasse in ieder geval is toegewezen.
De CSS voor het geven van de breedte, hoogte en achtergrondkleur aan de div is als volgt:.
Oké, nadat ik klaar was met het coderen, zou mijn webpagina er zo uitzien.
Wanneer ik nu op de knop klik, moet de achtergrondkleur van het vak worden gewijzigd.
En je kunt zien in de gif hierboven, de kleur van de div verandert met een klik op de knop. Dat is geweldig, toch!
Dit is dus hoe we de Vue Watch kunnen gebruiken om dynamische interactie op de webpagina te maken.
Conclusie
In dit bericht hebben we geprobeerd de status van een variabele te wijzigen door erop te klikken of een andere variabele te wijzigen met behulp van de watch-eigenschap van Vue.js. We hebben ook enkele dynamische wijzigingen aangebracht in de webpagina. We hebben gezien dat we met een klik op de knop in het attribuut bij klikken de status van de variabele hebben gewijzigd en hebben laten zien dat de eigenschap watch de variabele heeft bekeken en een actie heeft uitgevoerd, zoals het wijzigen van de status van een andere variabele.
