Fungsi Conditional Pada Vue.js

Sekarang mari kita coba mengunjungi website ini untuk mengetahui lebih dalam mengenai fungsi conditional pada Vue.js

https://www.geeksforgeeks.org/javascript/vue-js-v-if-directive/

https://www.geeksforgeeks.org/javascript/vue-js-v-show-directive/

Menurut teman-teman, apa yang membedakan antara fungsi v-if dan v-show?

Pada kondisi yang bagaimana menggunakan fungsi-fungsi tersebut?

Setelah menganalisis fungsi-fungsi conditional pada Vue.js, berikut terdapat best-practice yang dapat dipertimbangkan dalam menggunakan fungsi-fungsi ini:

1. Pastikan v-if digunakan dengan benar

v-if seharusnya tidak memiliki modifier.

Apa itu modifier?

Modifier dirancang untuk mengubah perilaku directive, yang sering kali berkaitan dengan penanganan peristiwa (misalnya, mencegah tindakan default, dijalankan hanya sekali) atau pengikatan data/data binding (misalnya, trimming input, mengonversi ke angka). Fungsi-fungsi ini tidak relevan dengan tindakan sederhana dalam menyisipkan HTML mentah.

Namun, ia harus memiliki argumen dengan ekspresi untuk memeriksa apakah akan menampilkan sesuatu.

Misalnya, alih-alih menulis:

<div v-if:abc="foo"/>

or:

<div v-if/>

We write:

<div v-if="foo"/>

2. Pastikan kita menggunakan v-show dengan benar

v-show digunakan untuk menampilkan sesuatu secara kondisional dengan menampilkan atau menyembunyikannya menggunakan CSS.

v-show membutuhkan argumen dengan ekspresi boolean yang diperiksa untuk menampilkan sesuatu jika mengembalikan nilai true.

Misalnya, kita menggunakannya dengan menulis:

<div v-show="foo"/>

Referensi:

https://vuejs.org/api/built-in-directives.html

https://www.geeksforgeeks.org/javascript/vue-js-directive/

https://vuejs.org/guide/essentials/conditional

https://medium.com/swlh/vue-best-practices-directives-a57e50e756e8