Syarat Reaktif dalam Vue
Mari kita jadikan syarat itu reaktif. Sebagai contoh, mari kita buat supaya elemen disembunyikan apabila butang ditekan. Katakan kita mempunyai perenggan berikut:
<template>
<p v-if="visible">teks</p>
</template>
Mari kita buat supaya perenggan kita pada asalnya dipaparkan:
data() {
return {
visible: true,
}
}
Sekarang mari buat butang, yang apabila ditekan akan menyembunyikan perenggan:
<template>
<button @click="hide">sembunyikan</button>
<p v-if="visible">teks</p>
</template>
Kaedah terikat akan menukar
sifat visible kepada false,
sekali gus menyebabkan
perenggan kita disembunyikan:
methods: {
hide: function() {
this.visible = false;
}
}
Diberikan satu perenggan dan satu butang. Katakan perenggan pada asalnya disembunyikan. Buatkan butang yang akan memaparkan perenggan.
Diberikan satu perenggan dan dua butang. Katakan butang pertama memaparkan perenggan, dan butang kedua - menyembunyikannya.
Ubahsuai tugas sebelumnya supaya hanya satu butang sahaja yang kelihatan pada skrin pada satu masa: jika perenggan dipaparkan, maka butang untuk menyembunyikan, dan jika disembunyikan - maka butang untuk memaparkan.
