Pada tutorial ini kita akan belajar tentang Conditional (pengandaian) Negasi v-if pada Vue.js , conditional dikenal juga dengan istilah ‘jika-maka’. Conditional pada Javascript merupakan suatu perintah yang digunakan untuk memilih satu aksi dari beberapa kemungkinan dengan syarat tertentu.
Pada tutorial sebelumnya kita telah dikenalkan dengan nilai true jika ingin menampilkan dan false sebaliknya (Directive v-if pada Vue.js)Â . Nah untuk kali ini kita akan mengenal bagaimana jika nilai pada data tidak di ubah, namun hakekatnya adalah nilainya adalah kebalikannya? Seperti misalnya pesan tidak akan tampil, walaupun nilainya adalah true, atau sebaliknya, pesan akan tampil walaupun nilainya adalah false.
Jawabannya ada di Conditional Negasi v-if pada Vue.js, negasi menghasilkan nilai kebalikan, anti dari nilai sebelumnya, negasi disimbolkan dengan sebuah tanda seru yang diletakkan di awal variable, berikut contohnya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> <b v-if="!tampil"> {{ pesan }} </b> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue( { el: '#app', data: { tampil: false, pesan: 'belajar conditional negasi v-if vue.js' } }) </script> </body> </html> |
Maka hasilnya akan muncul teks belajar conditional negasi v-if vue.js, walaupun nilai tampil adalah false, namun karena yang dipanggil adalah negasi dari tampil (!tampil), maka nilainya adalah kebalikannya, yaitu true.