v-show, v-if, v-else, v-else-if

Conditional rendering is a crucial aspect of building dynamic and responsive user interfaces in Vue.js. Vue provides us with several directives to accomplish this task. Some of the most commonly used ones are v-show and v-if, as well as others like v-else and v-else-if. In this topic, we will explore how these directives work and when to use them in your Vue applications.

Using v-show

v-show is a Vue directive used for conditional rendering. It toggles the visibility of an element based on the truthiness of an expression. When the expression evaluates to true, the element is displayed; when it evaluates to false, the element is hidden. Unlike v-if, v-show does not remove the element from the DOM but simply applies CSS styling to hide it.

Let's take a look at an example:

<template>
  <div>
    <p v-show="isVisible">This element is shown or hidden.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const isVisible = ref(true);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
};
</script>

Here is the output of the above code snippet;

In this example, clicking the "Toggle Visibility" button will alternate the visibility of the <p> element. The element remains in the DOM, but its display property is adjusted.

Using v-if

On the other hand, v-if is another directive used for conditional rendering. Unlike v-show, v-if completely removes the element from the DOM when the expression evaluates to false. This means that the element is not only hidden but also not present in the rendered HTML.

Here's an example:

<template>
  <div>
    <p v-if="isVisible">This element is conditionally rendered.</p>
    <button @click="toggleRendering">Toggle Rendering</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const isVisible = ref(true);

const toggleRendering = () => {
  isVisible.value = !isVisible.value;
};
</script>

Here's what the output looks like:

In this case, clicking the "Toggle Rendering" button will add or remove the <p> element from the DOM.

Using v-else

v-else is used to conditionally render an element when the preceding v-if expression evaluates to false. It is placed immediately after a v-if block.

Here's an example:

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

<script setup>
import { ref } from "vue";

const isVisible = ref(false);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
};
</script>

This Vue 3 code defines a simple component that displays two paragraphs conditionally based on the value of the isVisible variable. Initially, isVisible is set to false, so the second paragraph is displayed. Clicking the "Toggle Visibility" button triggers the toggleVisibility function, which switches the value of isVisible between true and false, causing the paragraphs to toggle their visibility accordingly. This code uses Vue 3's Composition API and <script setup> syntax for more concise and organized component logic.

When this happens, the first paragraph, which was controlled by v-if, becomes hidden, and the second paragraph with the text "This paragraph is visible when isVisible is false." becomes visible. The v-else directive essentially specifies what must be rendered when the preceding v-if condition is false, providing a way to handle alternative content rendering based on conditions in Vue.js components.

Using v-else-if

The v-else-if directive allows you to add conditions in a chain of conditions. It works in tandem with v-if and v-else.

<template>
  <div>
    <p v-if="status === 'success'">Operation was successful.</p>
    <p v-else-if="status === 'error'">An error occurred.</p>
    <p v-else>Processing...</p>
    <button @click="changeStatus">Change Status</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const status = ref("success");

const changeStatus = () => {
  if (status.value === "success") {
    status.value = "error";
  } else if (status.value === "error") {
    status.value = "processing";
  } else {
    status.value = "success";
  }
};
</script>

The example above displays different messages based on a status variable and allows the status to be changed by clicking a button. In the <script setup> section, the status variable is declared as a reactive reference using ref('success'), initially set to 'success'. The changeStatus function toggles the status between 'success', 'error', and 'processing' in sequence. In the template, conditional rendering (v-if, v-else-if, v-else) is used to display different messages based on the status. When the "Change Status" button is clicked, the changeStatus function is called, updating the status and triggering a re-render of the template, reflecting the updated status message on the page.

Best practices

When it comes to choosing between v-show and v-if, consider the following best practices:

• Use v-show when you need to toggle visibility frequently, as it is more efficient in terms of performance since it doesn't manipulate the DOM structure.
• Use v-if when you want to conditionally include or exclude elements from the DOM based on complex conditions.
• Use v-else and v-else-if in conjunction with v-if for more elaborate conditional rendering scenarios.

Conclusion

Vue.js offers a distinct set of directives for conditional rendering, including v-show, v-if, v-else, and v-else-if. These directives provide developers with the flexibility to control what is displayed in their web applications based on various conditions.

By understanding the differences between v-show and v-if, and knowing when to use v-else and v-else-if in conjunction with v-if, you can create dynamic and responsive user interfaces that adapt to different scenarios.