v-show

v-show provides an expressive way to show and hide DOM elements.

Here's an example of a simple dropdown component using v-show:

vue

<script setup>
import { ref } from 'vue'

// reactive data
const open = ref(false)
</script>

<template>
  <button v-on:click="open = !open">Toggle Dropdown</button>
  
  <div v-show="open">
    Dropdown Contents...
  </div>
</template>

When the "Toggle Dropdown" button is clicked, the dropdown will show and hide accordingly.

NOTE

v-show toggles an element’s visibility by changing its display CSS property. The element remains in the DOM at all times.

v-show ​

v-show