vue js toggle show element code example

Example 1: vue v-show toggle

<div v-show="isVisible">
  <h1>Título</h1>
  <p>Parágrafo 1</p>
  <p>Parágrafo 2</p>
</div>
//div will be rendered and toggle display: none; as isVisible is set true or false.

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

Example 2: hide component on click vue

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isHidden = true">Hide the text below</button>
  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>

  <h1 v-if="!isHidden">Hide me on click event!</h1>
</div>

var app = new Vue({
  el: '#app',
  data: {
    isHidden: false
  }
})