Ռեակտիվ պայման Vue-ում
Եկեք անենք, որ պայմանը դառնա ռեակտիվ: Օրինակ՝ անենք, որ տարրը թաքնվի կոճակի սեղմումից: Ենթադրենք ունենք հետևյալ պարբերությունը.
<template>
<p v-if="visible">text</p>
</template>
Եկեք անենք, որ մեր պարբերությունը սկզբում ցուցադրված լինի.
data() {
return {
visible: true,
}
}
Հիմա ստեղծենք կոճակ, որի սեղմումով պարբերությունը կթաքնվի.
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Կապված մեթոդը կփոխի
visible հատկությունը false-ի,
դրանով իսկ ստիպելով մեր
պարբերությունը թաքնվել.
methods: {
hide: function() {
this.visible = false;
}
}
Տրված է պարբերություն և կոճակ: Թող պարբերությունը սկզբում թաքնված լինի: Ստեղծեք կոճակ, որը կցուցադրի պարբերությունը:
Տրված է պարբերություն և երկու կոճակ: Թող առաջին կոճակը ցուցադրի պարբերությունը, իսկ երկրորդը՝ թաքցնի այն:
Փոփոխեք նախորդ առաջադրանքն այնպես, որ էկրանին միշտ տեսանելի լինի կոճակներից միայն մեկը. եթե պարբերությունը ցուցադրված է, ապա թաքցնելու կոճակը, իսկ եթե թաքնված է, ապա ցուցադրելու կոճակը:
