<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
This Pen doesn't use any external CSS resources.