Vue.js Conditional Rendering

Syntax

There are various syntaxes for conditionally rendering content in Vue.js, depending on the requirements. Some basic examples are:

<!-- v-if -->
<template v-if="condition">
  <p>This element will only be displayed if condition is true.</p>
</template>

<!-- v-else -->
<template v-if="condition1">
  <p>Condition 1 is true.</p>
</template>
<template v-else-if="condition2">
  <p>Condition 2 is true.</p>
</template>
<template v-else>
  <p>Neither condition 1 nor condition 2 are true.</p>
</template>

<!-- v-show -->
<template>
  <p v-show="condition">This element will be hidden if condition is false, but not removed from the DOM.</p>
</template>

<!-- v-for -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

Example

<template>
  <div>
    <h1 v-if="showHeading">This heading will be displayed if showHeading is true</h1>
    <p v-show="showParagraph">This paragraph will be hidden if showParagraph is false</p>
    <p v-if="items.length === 0">There are no items to display</p>
    <ul v-else>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true,
      showParagraph: false,
      items: [],
    };
  },
};
</script>

Output

The output of the above code will display a heading, hide the paragraph, and show a message if there are no items to display. If there are items, a list will be displayed with their names.

Explanation

Conditional rendering is a feature of Vue.js that allows you to conditionally display or hide content based on different criteria. There are different ways to conditionally render in Vue.js, such as v-if, v-else, v-show, and v-for.

v-if and v-else work together to display content based on a condition. v-if will only display the content if the condition is true, while v-else will display the content if the condition is false.

v-show works similarly to v-if, but instead of removing the content from the DOM, it simply hides it.

v-for is used to loop through an array and display its contents.

Use

Conditional rendering is commonly used to display content based on various conditions, such as user input, API response, or internal state. It can also be used to enhance the user experience by improving the performance and readability of the UI.

Important Points

• v-if and v-show have different effects on the DOM and should be used differently based on the use case.
• v-else-if can be used to check for additional conditions before displaying content.
• v-for can be used to loop through an array or object and display its contents.
• Conditional rendering can be used to optimize performance by reducing the amount of unnecessary DOM manipulation.

Summary

Conditional rendering is a powerful feature of Vue.js that allows you to display or hide content based on various conditions. It provides various syntaxes like v-if, v-else, v-show, and v-for for conditionally rendering content. Understanding the syntax and use cases for these directives can greatly enhance the functionality and performance of your Vue.js applications.