რეაქტიული პირობა Vue-ში
მოდით, გავაკეთოთ ისე, რომ პირობა იყოს რეაქტიული. მაგალითად, გავაკეთოთ ისე, რომ ელემენტი დამალული იყოს ღილაკზე დაჭერისას. მოდით, გვქონდეს შემდეგი აბზაცი:
<template>
<p v-if="visible">ტექსტი</p>
</template>
მოდით, გავაკეთოთ ისე, რომ ჩვენი აბზაცი თავიდან იყოს ნაჩვენები:
data() {
return {
visible: true,
}
}
მოდით, ახლა გავაკეთოთ ღილაკი, რომლის დაჭერისას აბზაცი დაიმალება:
<template>
<button @click="hide">დამალვა</button>
<p v-if="visible">ტექსტი</p>
</template>
მიბმული მეთოდი შეცვლის
თვისებას visible false-მდე,
რითაც აიძულებს ჩვენს
აბზაცს დაიმალოს:
methods: {
hide: function() {
this.visible = false;
}
}
მოცემულია აბზაცი და ღილაკი. აბზაცი თავიდან იყოს დამალული. გააკეთეთ ღილაკი, რომელიც აჩვენებს აბზაცს.
მოცემულია აბზაცი და ორი ღილაკი. პირველი ღილაკი აჩვენებს აბზაცს, ხოლო მეორე - ამალებს მას.
მოდიფიცირება გაუკეთეთ წინა ამოცანას ისე, რომ ეკრანზე ყოველთვის იყოს ნაჩვენები მხოლოდ ერთი ღილაკი: თუ აბზაცი ნაჩვენებია, მაშინ ღილაკი დამალვისთვის, ხოლო თუ დამალულია - მაშინ ღილაკი ჩვენებისთვის.
