<div id="vuetest" class="container">
  <div>
    <input type="button" value="v-if" v-on:click="helloIf=!helloIf">
    <div v-if="helloIf">Hi,if！</div>
  </div>

  <div>
    <input type="button" value="v-show" v-on:click="helloShow=!helloShow">
    <div v-show="helloShow">Hi,show！</div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');

body {
  font-family: 'Kosugi Maru', sans-serif;
}

.container {
  display : flex;
  text-align : center;
  height : 170px;
}

.container > div {
  width : 150px;
  padding : 1em;
  margin : 1em;
  border : 1px solid #cacaca;
  border-radius : 5px;
}

.container input {
  padding : 0.5em;
  margin-bottom : 1em;
}

.container input + div {
  padding : 1em;
  color : #fff;
  background : #ed631e;
  border-radius : 5px;
}

var vuetest = new Vue ({
  el : "#vuetest",
  data : {
    helloIf : false,
    helloShow : false,
  }
})