vue内容展开和收起

<style>

.open-item{

  transition: .5s;

  height: calc-size(auto, size);

  overflow: hidden;

}

.close-item{

  transition: .5s;

  height:0;

  overflow: hidden;

}

</style>

<template>

                <span type="primary" class="open-btn" plain @click="openToggle">{{isOpen ? "收起" : "展开" }}

                  <i :style="{transform:isOpen ? 'rotate(360deg)' : 'rotate(180deg)', left: isOpen ? '30%' : '0px', transition: '0.3s'}" class='el-icon-arrow-down'></i>

                </span>

<div :class="evidence.isOpen ? 'open-item' : 'close-item'">

内容

</div>

</template>

<script>

export default {

　　data(){

　　return {

isOpen:true

}

},

methods:{

　　openToggle(){

this.isOpen = !this.isOpen

}

}

}

</script>