How can I control the visibility of components in Vue 3?

How can I control the visibility of components in Vue 3?

In Vue 3, you can control component visibility using the v-if, v-else-if, and v-else directives. These directives allow you to conditionally render components based on a boolean expression.

Can you give me an example of using v-if?

Sure! Here's a simple example:

<template>
  <div>
    <button @click="isVisible = !isVisible">Toggle Visibility</button>
    <p v-if="isVisible">Now you see me!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  }
};
</script>

What about using v-show instead of v-if?

v-show is another option! It toggles the visibility of an element by changing its CSS display property, rather than removing it from the DOM like v-if. This can be more efficient if you need to toggle visibility frequently.

Are there any performance considerations I should be aware of?

Yes, if you're toggling visibility frequently, v-show can be more performant since it doesn't re-render the component. However, if the component is heavy and not needed, v-if is better as it removes it from the DOM.