vuejs toggle element on click 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
  }
})

Example 3: toggle on-click button vue

<button @click="variable = !variable">
	Toggle Value
</button>

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