Cara Membuat Show Hide Element Dengan VueJS

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:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Show Hide</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div class="container">
	<div class="row mt-5">
	<div class="col-md-4"></div>
	<div class="col-md-4 text-center">
	<div id="app">
	  <p v-if="wow" class="bg-primary">Terbaik dan Nomor Satu</p>
	  <img src="image.jpg" v-if="lihat">
	</div>
	</div>	
	<div class="col-md-4"></div>
	</div></div>
	<script src="app.js"></script>
</body>
</html>

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:

var app = new Vue({
	el:'#app',
	data: {
		wow:true,
		lihat:true
	}
})

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:

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

terima kasih

Cara Membuat Show Hide Element Dengan VueJS

Kategori