„Vue Watch“, kad būtų sukurta dinaminė sąveika

Vue.„js“ yra labai įspūdinga ir reaktyvi „JavaScript“ vartotojo sąsaja, naudojama greitai ir lengvai kurti front-end svetaines. Šis įrašas sužinos apie laikrodžio savybę, kuri yra viena iš pagrindinių sąvokų.

Vue.js suteikia stebėjimo ypatybę stebėti kintamąjį, o pasikeitus kintamajam, tai leidžia mums paleisti funkciją, kad galėtume atlikti dinaminę sąveiką. Išbandykime pavyzdį ir atlikite dinamišką sąveiką naudodami „Vue Watch“ ypatybę.

Pavyzdys

Pirmiausia bandysime pakeisti kintamąjį spustelėdami mygtuką, o tada naudodami laikrodžio ypatybę, stebėsime tą kintamąjį ir pakeisime kitą kintamąjį, kad atliktume dinamiškus pakeitimus tinklalapyje.

Pirma, tarkime, kad mes turime du kintamuosius.
duomenys ()
grįžti
buttonBool: tiesa,
spalva: "raudona"

Mes susiejome „buttonBool“ kintamąjį su mygtuko elementu šablone.

Spustelėkite mygtuką, norime pakeisti, tarkime, padalijimo fono spalvą. Taigi pirmiausia sukurkite div šablone.

Dabar pirmiausia sukurkime laikrodžio ypatybę ir pakeiskime „color“ kintamojo būseną keičiant „buttonBool“ kintamąjį.

žiūrėti:
buttonBool ()
tai.spalva = !tai.spalva;

Gerai! Paskutinis žingsnis kairėje yra pakeisti spalvos klasių kintamojo div klases. Taigi, padarykime tai naudodami „Vue“ klasės įrišimo funkciją.js.

Aš ką tik priskyriau klasę „raudona“, jei „color“ kintamojo būsena yra teisinga, dar kitaip - „žalia“, jei spalvos kintamojo būsena yra „false“, o klasė „box“ bet kuriuo atveju priskirta.

CSS, suteikiantis „div“ plotį, aukštį ir fono spalvą, yra tokia.

Gerai, atlikęs kodavimo dalykus, mano tinklalapis bus toks.

Dabar, kai spusteliu mygtuką, laukelio fono spalva turėtų pasikeisti.

Ir jūs galite paliudyti aukščiau esančiame gife, mygtuko paspaudimu keičiasi div spalva. Tai nuostabu, tiesa!

Taigi, tokiu būdu mes galime naudoti „Vue Watch“, kad tinklalapyje būtų galima dinamiškai bendrauti.

Išvada

Šiame įraše mes bandėme pakeisti kurio nors kintamojo būseną spustelėdami arba pakeisdami kitą kintamąjį naudodami „Vue“ stebėjimo ypatybę.js. Mes taip pat atlikome keletą dinamiškų tinklalapio pakeitimų. Mes matėme, kad spustelėję mygtuką atribute paspaudę mes pakeitėme kintamojo būseną ir parodėme, kad stebėjimo ypatybė stebėjo kintamąjį ir atliko tam tikrą veiksmą, pavyzdžiui, kito kintamojo būsenos keitimą.