Rendering Bersyarat Vue.js

Rendering bersyarat di Vue.js memungkinkan Anda untuk menampilkan atau menyembunyikan elemen secara dinamis berdasarkan kondisi tertentu. Fitur ini penting untuk menciptakan antarmuka pengguna yang responsif dan interaktif. Vue.js menyediakan beberapa perintah untuk menangani rendering bersyarat, yang memungkinkan Anda mengelola visibilitas elemen dalam aplikasi secara efisien.

Arahan v-if

Direktif v-if digunakan untuk merender elemen secara kondisional berdasarkan kebenaran suatu ekspresi. Jika ekspresi bernilai true, elemen akan dirender; jika tidak, elemen tidak akan disertakan dalam DOM. Berikut ini adalah contoh dasar:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dalam contoh ini, elemen paragraf hanya ditampilkan jika isVisible adalah true. Mengklik tombol akan mengubah nilai isVisible dan dengan demikian mengontrol visibilitas paragraf.

Arahan v-else

Direktif v-else dapat digunakan bersama dengan v-if untuk menentukan blok konten alternatif yang akan ditampilkan saat kondisi v-if adalah false. Berikut ini contohnya:

<template>
  <div>
    <p v-if="isVisible">This text is visible if 'isVisible' is true.</p>
    <p v-else>This text is visible if 'isVisible' is false.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dalam contoh ini, jika isVisible adalah true, paragraf pertama akan ditampilkan. Jika isVisible adalah false, paragraf kedua akan ditampilkan.

Arahan v-show

Direktif v-show juga memungkinkan Anda untuk merender elemen secara bersyarat, tetapi berbeda dari v-if karena ia mengubah visibilitas elemen menggunakan properti CSS display daripada menambahkan atau menghapusnya dari DOM. Ini bisa lebih efisien jika Anda perlu sering mengubah visibilitas suatu elemen.

<template>
  <div>
    <p v-show="isVisible">This text is visible if 'isVisible' is true.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Dalam contoh ini, perintah v-show mengontrol visibilitas paragraf dengan menyetel properti display. Elemen tetap berada di DOM tetapi disembunyikan atau ditampilkan berdasarkan nilai isVisible.

Arahan v-else-if

Direktif v-else-if digunakan untuk membuat rantai "else if" dalam logika rendering bersyarat Anda. Direktif ini memungkinkan Anda menentukan kondisi tambahan untuk mengevaluasi apakah kondisi v-if sebelumnya tidak terpenuhi. Berikut ini contohnya:

<template>
  <div>
    <p v-if="status === 'loading'">Loading...</p>
    <p v-else-if="status === 'error'">Error occurred!</p>
    <p v-else>Content loaded successfully.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    };
  }
};
</script>

Dalam contoh ini, konten yang ditampilkan bergantung pada nilai properti status. Direktif v-if, v-else-if, dan v-else digunakan untuk menangani status yang berbeda.

Kesimpulan

Rendering bersyarat merupakan aspek penting dalam pengembangan aplikasi interaktif dan dinamis dengan Vue.js. Dengan menggunakan perintah seperti v-if, v-else, v-show, dan v-else-if, Anda dapat mengontrol tampilan elemen berdasarkan berbagai kondisi. Menguasai perintah ini akan membantu Anda membuat antarmuka yang lebih responsif dan ramah pengguna dalam aplikasi Vue.js Anda.