Vueで高いdivを固定して展開と収縮操作を行う

Vueで高いdivを固定して展開と収縮操作を行う
HTML

<div class="downUp transition-dom" ref="box" @click="funAnimate"></div>

CSS

.downUp {
	height: 36px;
}
.transition-dom {
	transition: all .2s linear 0s;
}

javascript

data() {
	return {
		headerOpen:false
	}
},
methods: {
    //           
    funAnimate() {
      if (this.headerOpen) {
        this.$refs.box.style.height = '36px'
      } else {
        this.$refs.box.style.height = '530px'
      }
      this.headerOpen = !this.headerOpen
    }
  }

実装原理:headerOpenの値を切り替えてboxのheightを決定する