<div id="app">
  <h1 v-if="show">{{name}}</h1>
  
  <ul v-for="person in persons" v-if="show">
    <li>{{person}}</li>
    
  </ul>
  
  <button @click="changeme">
    {{show ? 'Hide' : 'Show'}}
  </button>
</div>
button{
  padding:.5rem;
  background-color:black;
  color:gold;
  width:5rem;
  font-size:1.1rem;
  cursor:pointer;
}

var app = new Vue({
  el:'#app',
  data:{
    name:'Welcome to Vuejs',
    show:true,
    persons:['Gowtham','Aaron','Tonny']
  },
  methods:{
     changeme(){
       this.show = !this.show
    }
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js