Pada kesempatan kali ini saya akan membahas tentang cara membuat show hide element dengan VeuJS. Element HTML yang saya pakai tag p untuk menempatkan teks dan tag img untuk menambahkan sebuah gambar, disini saya juga menggunakan template bootstrap terlihat rapi. Baiklah mari langsung saja mulai membuatnya, yuuuk ikutin langkah-langkah berikut ini.Langkah Pertama sahabat silahkan copy link CDN Vue.js jika ingin online filenya atau bisa download agar file secara offlineĀ  dan silahkan klik disini ,buat sebuah struktur HTML seperti berikut ini:

bisa dilihat pada script diatas menggunakan attribute v-if yang dipakai untuk sebuah pengkodisian,

Langkah selanjutnya ketikan script seperti dibawah ini lalu simpan diberi nama file app.js:

jadi ketika kita menggunakan vue, hal yang harus perhatikan adalah membuat new Vue({})

  • el: adalah nama template yang dibuat,
  • data: isi dari data yang ingin kita tampilkan dari v-if =”wow” untuk tag <p> dan v-if =”lihat” untuk tag <img>
  • jika value berisi true maka data akan tampil
  • jika value berisi false maka data tidak tampil

Jika sudah coba jalankan pada browser maka tampilan akan seperti ini:

2-Cara Membuat Show Hide Dengan VueJS

Demikian pembahasan artikel tentang cara membuat show hide element dengan VeuJS. ,semoga bermanfaat dan selamat mencoba

terima kasih