Cara Penggunaan Directive V-Show, dan V-If Pada Vue js
Vue js adalah sebuah sebuah framework atau kerangka kerja JavaScript yang bersifat open source yang dapat kita gunakan bagi membangun sebuah system atau program dan vue js pun mampu menjalankan program single page yang canggih. Di bahan vue js kali ini kita akan membahas mengenai Cara Pemakaian Directive V-Show, dan V-If Di Vue js. Seperti yang kita ketahui directive adalah sebuah sebuah attribute dari vue js yang nantinya dapat di masukan kedalam tag-tag html yang kita gunakan. Directive mempunyai ciri yaitu dengan prefix v- dan value dari directive yang kita gunakan bagi menjalankan binding expressions. Kewajiban dari directive ini yaitu memberikan instruksi ke DOM bagi menjalankan sesuatu ketika value expression berubah.
- V-show adalah sebuah directive yang digunakan bagi menampilkan element pada suatu kondisi, selaku contoh kita akan merancang sebuah inputan dan jikalau inputan tersebut kita masukan nama warna seperti, red, blue dan lainnya karenanya akan tampil sebuah text dengan warna yang kita inputkan bagi scriptnya seperti dibawah ini :
<html>
<head>
<meta charset=UTF-8>
<title>Cara Pemakaian Directive V-Text dan V-HTML Di 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 yakni {{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>
Apabila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini :
- V-if adalah sebuah directive conditional selain dari di v-show, perbedaannya antara v-show dan v-if yaitu, di v-show tak menghapus element dan hanya menggunakan property display : none, sedangkan v-if akan menghapus element jikalau kondisinya tak terpenuhi dan akan menampilkan element jikalau kondisinya terpenuhi.
Jadi v-show dapat kita gunakan jikalau kita ingin show/hide sebuah element yang tak mengalami perubahan dan dilakukan sesering mungkin karenanya sebaiknya kita menggunakan v-show karena tak akan memberatkan program karena element tersebut hanya di set menjadi display : none, namun sebaliknya jikalau element tersebut tak ingin di render ketika pertama-tama kali di load, atau hanya ingin dibangun di ketika kondisi terpenuhi saja karenanya sabaiknya kita menggunakan v-if.
Berikut cara pemakaian v-if yang akan dijalankan jikalau kondisinya terpenuhi :
<html>
<head>
<meta charset=UTF-8>
<title>Cara Pemakaian Directive V-Text dan V-HTML Di 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'>JK : {{gender}} </p>
<!-- contoh 3 if, else if, else -->
<p v-if=jumlah <= 100 jumlah >= 90>
Nilai {{name}} yakni A = <b> {{jumlah}} Karenanya Lulus</b>
</p>
<p v-else-if=jumlah <= 89 jumlah >= 80>
Nilai {{name}} yakni B = <b> {{jumlah}} Karenanya Lulus</b>
</p>
<p v-else-if=jumlah <= 79 jumlah >= 70>
Nilai {{name}} yakni C = <b> {{jumlah}} Karenanya Lulus</b>
</p>
<p v-else-if=jumlah <= 69 jumlah >= 60>
Nilai {{name}} yakni D = <b> {{jumlah}} Karenanya Tak Lulus</b>
</p>
<p v-else-if=jumlah <= 59 jumlah >= 0>
Nilai {{name}} yakni E = <b> {{jumlah}} Karenanya Tak 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 Source Code Aplikasi',
name: 'Irwan',
gender:'laki-laki',
nilai1 : 80,
nilai2 : 90,
},
computed : {
jumlah : function(){
return (this.nilai1 + this.nilai2) / 2
}
}
})
</script>
</html>
jikalau kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini :
Oke teman-teman seperti itulah pembahasan kita mengenai Cara Pemakaian Directive V-Show, dan V-If Di Vue js.
Semoga bermanfaat.
Terima kasih.
Sumber https://kursuswebsite.org
