show and hide block example 1

by SnehalKadwe

HTML

<div id="app">
  <div v-if="active">
    <p>
      Hello
    </p>
  </div>
  <button type="button" @click="show()">
    Show
  </button>
  <br><br><br>
  
</div>
<style>
  .displayBlock {
  display: block;
}
</style>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center,
}

Vue

new Vue({
  el: "#app",
  data: {
  	active: false,
  },
  methods: {
  	show()
    {
    	this.active = ! this.active
    }
  }
})