Vue js merupakan sebuah framework atau kerangka kerja JavaScript yang bersifat open source yang dapat kita gunakan untuk membangun sebuah system atau aplikasi dan vue js juga mampu menjalankan aplikasi single page yang canggih. Pada materi vue js kali ini kita akan membahas tentang Cara Penggunaan Directive V-Show, dan V-If Pada Vue js. Seperti yang kita ketahui directive merupakan sebuah attribute dari vue js yang nantinya dapat di masukan kedalam tag-tag html yang kita gunakan. Directive memiliki ciri yaitu dengan prefix v- dan value dari directive yang kita gunakan untuk melakukan binding expressions. Tugas dari directive ini yaitu memberikan instruksi ke DOM untuk melakukan sesuatu saat value expression berubah.
- V-show merupakan directive yang digunakan untuk menampilkan element dalam suatu kondisi, sebagai contoh kita akan membuat sebuah inputan dan jika inputan tersebut kita masukan nama warna seperti, red, blue dan lainnya maka akan tampil sebuah text dengan warna yang kita inputkan untuk scriptnya seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js</title>
</head>
<body>
<div id="app">
<!-- contoh v-show -->
<input type="text" v-model="activeColor" placeholder="masukan warna">
<h3 v-bind:style="{ 'color': activeColor}" v-show="activeColor">warna adalah {{activeColor}}</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
activeColor: ''
}
})
</script>
</html>
Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :
- V-if merupakan directive conditional selain dari pada v-show, perbedaannya antara v-show dan v-if yaitu, pada v-show tidak menghapus element dan hanya menggunakan property display : none, sedangkan v-if akan menghapus element jika kondisinya tidak terpenuhi dan akan menampilkan element jika kondisinya terpenuhi.
Jadi v-show dapat kita gunakan jika kita ingin show/hide sebuah element yang tidak mengalami perubahan dan dilakukan sesering mungkin maka sebaiknya kita menggunakan v-show karena tidak akan memberatkan aplikasi sebab element tersebut hanya di set menjadi display : none, namun sebaliknya jika element tersebut tidak ingin di render saat pertama kali di load, atau hanya ingin dibuat pada saat kondisi terpenuhi saja maka sabaiknya kita menggunakan v-if.
Berikut cara penggunaan v-if yang akan dijalankan jika kondisinya terpenuhi :
<html>
<head>
<meta charset="UTF-8">
<title>Cara Penggunaan Directive V-Text dan V-HTML Pada Vue js</title>
</head>
<body>
<!-- contoh 1 if, else-->
<div id="app">
<p v-if="show">{{ message }}</p>
<p v-else="show"> Nama : {{ name }}</p>
<!-- contoh 2 if, else -->
<p v-if="gender == 'laki-laki' || gender == 'perempuan'">Jenis kelamin : {{gender}} </p>
<!-- contoh 3 if, else if, else -->
<p v-if="jumlah <= 100 && jumlah >= 90">
Nilai {{name}} adalah A = <b> {{jumlah}} Maka Lulus</b>
</p>
<p v-else-if="jumlah <= 89 && jumlah >= 80">
Nilai {{name}} adalah B = <b> {{jumlah}} Maka Lulus</b>
</p>
<p v-else-if="jumlah <= 79 && jumlah >= 70">
Nilai {{name}} adalah C = <b> {{jumlah}} Maka Lulus</b>
</p>
<p v-else-if="jumlah <= 69 && jumlah >= 60">
Nilai {{name}} adalah D = <b> {{jumlah}} Maka Tidak Lulus</b>
</p>
<p v-else-if="jumlah <= 59 && jumlah >= 0">
Nilai {{name}} adalah E = <b> {{jumlah}} Maka Tidak Lulus</b>
</p>
<p v-else="jumlah">
<b>Belum Ada Nilai</b>
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
show:false,
message: 'Hello DUMET School',
name: 'Irwan',
gender:'laki-laki',
nilai1 : 80,
nilai2 : 90,
},
computed : {
jumlah : function(){
return (this.nilai1 + this.nilai2) / 2
}
}
})
</script>
</html>
jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :
Oke teman-teman itulah pembahasan kita tentang Cara Penggunaan Directive V-Show, dan V-If Pada Vue js.
Semoga bermanfaat.
Terima kasih.
The post Cara Penggunaan Directive V-Show, dan V-If Pada Vue js appeared first on Kursus Website Terbaik.