v-show Directive

In Vue, The v-show directive is used to conditionally display an element based on a truthy value.

Unlike v-if, which completely "removes" or "adds" the element to the DOM, "v-show" toggles the CSS "display" property of the element to "hide" or "show" it.

Basic Usage:

// visible hide the content from UI, but html will be present in DOM.
<p v-show="isVisible">if isVisible is True then Content will visible</p>

// unlike, in v-if it remove the html from the DOM.

the

element will be displayed if the "isVisible" data property in the Vue instance evaluates to true.

If "isVisible" is false, the element will be hidden using the CSS display: none.

Show and Hide Content using v-show Directive:

<template>
  <div class="hello">
    <button @click="changeVisibility">Change Visibility</button>
    <div v-show="isVisible">Hide And Show Content</div>
  </div>
</template>

In Template, we have defined the `changeVisibility` method and bind with the `@click` directive. similarly, we have defined the `isVisible` attribute and bind with the `v-show` directive.

Example:

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

In Script, we have declared the `data` method and methods object so that we can access it in our template.

If we click on `changeVisibility` method then it will update the value of `isVisibility` and on that basics, our content will show or hide from the screen.

Conditional Classes with v-show:

<p class="container" v-show="isVisible">
  Content will be visible when isVisible property is true
</p>

We can combine "v-show" with CSS classes to apply additional styles when the element is shown or hidden.

For example, we can define different styles for the container element based on whether it's visible or hidden.

Performance Considerations:

Unlike "v-if", which completely removes or adds elements to the DOM, "v-show" only toggles the CSS "display" property.
This means that elements with "v-show" will always be present in the DOM, even if they are hidden.
Use "v-show" when we want to toggle visibility frequently without incurring the cost of adding/removing elements from the DOM. However, keep in mind that hidden elements will still occupy space in the layout.
v-show directive does not support the

<-- v-for

v-on -->