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