Phenquestions
Vue.A js egy nagyon lenyűgöző és reaktív JavaScript front-end keretrendszer, amelyet a front-end weboldalak gyors és egyszerű fejlesztésére használnak. Ez a bejegyzés megismeri az óra tulajdonságait, amelyek az egyik legalapvetőbb fogalom.
Vue.A js egy figyelő tulajdonságot biztosít egy változó figyeléséhez, és ennek a változónak a változásakor lehetővé teszi számunkra, hogy futtassunk egy függvényt, hogy dinamikus interakciót hajtsunk végre. Próbálkozzunk egy példával, és folytassunk néhány dinamikus interakciót a Vue Watch tulajdonság használatával.
Példa
Először megpróbálunk megváltoztatni egy változót egy gombnyomásra, majd a watch tulajdonság használatával meg fogjuk figyelni ezt a változót, és módosítunk néhány más változót a weboldal dinamikus változásainak elvégzéséhez.
Először tegyük fel, hogy két változónk van.adatok ()
Visszatérés
buttonBool: igaz,
piros szín"
És összekötöttük a „buttonBool” változót a sablonban található gombelemmel.
Ez egy tesztoldal
Egy, mondjuk osztás háttérszínét a gombnyomásra szeretnénk megváltoztatni. Tehát először hozzon létre egy div-t a sablonban.
Ez egy tesztoldal
Most először hozzunk létre egy figyelő tulajdonságot, és változtassuk meg a „color” változó állapotát a „buttonBool” változó változásakor.
néz:buttonBool ()
ez.szín = !ez.szín;
Rendben! Az utolsó lépés a színváltozó változásának div osztályainak megváltoztatása. Tehát tegyük ezt meg a Vue osztálykötési funkciójának használatával.js.
Ez egy tesztoldal
Itt most a „piros” osztályt rendeltem be, ha a „color” változó állapota igaz, másként a „zöld” értéket, ha a színváltozó állapota „hamis”, és a „box” osztályt mindenképpen hozzárendeltük.
A szélességet, magasságot és háttérszínt a div számára megadó CSS a következő.
Rendben, miután elvégeztem a kódolási dolgokat, a weboldalam ilyen lenne.
Most, amikor rákattintok a gombra, meg kell változtatni a doboz háttérszínét.
És tanúja lehet a fenti gif-nek, a div színe a gombnyomásra változik. Ez csodálatos, igaz!
Így használhatjuk a Vue Watch-ot dinamikus interakcióra a weboldalon.
Következtetés
Ebben a bejegyzésben megpróbáltunk megváltoztatni néhány változó állapotát valamelyik változó kattintásával vagy módosításával a Vue figyelő tulajdonságával.js. Néhány dinamikus változtatást is végrehajtottunk a weboldalon. Láttuk, hogy a gombra kattintva, a kattintás attribútumban megváltoztattuk a változó állapotát, és megmutattuk, hogy a watch tulajdonság figyelte a változót, és valamilyen műveletet hajtott végre, például más változó állapotának megváltoztatását.
