Vue

by ishikawa

HTML

<div id="app">
    <button @click="active">詳細表示</button>

    <div id="content" v-if="isActive">  
      詳細な内容
    </div>  
</div>

CSS

#app {
  width: 80%;
  margin: 20px auto;
}

#content {
  margin: 20px 0 0;
  padding: 8px 12px;
  border: solid 1px #ccc;
}

Vue

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