<template>  <div class="dealRecord-wrap">    <div class="title-contant" v-for="(item,index) in items " >      <div class="title" @click="showHide(index)">        <h3>2018年0{{index+6}}月</h3>        <div class="number">800筆<i></i></div>      </div>      <div class="contant">        <ul>          <li v-for="i in item.allNumber">            {{index+6}}          </li>        </ul>      </div>    </div>  </div></template><script>export default{  data(){    return{      items:[        {v:'qqq',allNumber:1},        {v:'aaa',allNumber:2},        {v:'qqq',allNumber:3},      ],    }  },  created(){    document.body.style.backgroundColor = '#f6f6f6';  },  mounted(){    for(var i=0;i<3;i++){  //這里取值自后臺返回的長度,設置頁面渲染完成后是否展開，此處不展開      document.getElementsByClassName('contant')[i].style.height = '0px';    }  },  components:{  },  methods:{    showHide(index){  //點擊展開收起      let contant = document.getElementsByClassName('contant')[index];  //這里我們通過參數index來讓瀏覽器判斷你點擊的是哪一個列表        let height = contant.getBoundingClientRect().height;  //獲取頁面元素的當前高度      document.getElementsByTagName('i')[index].style.transform = !!height?'rotateX(0deg)':'rotateX(180deg)';      if (!!height) {      contant.style.height = height + 'px';      let f = document.body.offsetHeight; //強制相應dom重繪，使最新的樣式得到應用      contant.style.height = '0px';      } else {      contant.style.height = 'auto';      height = contant.getBoundingClientRect().height;      contant.style.height = '0';      let f = document.body.offsetHeight;      contant.style.height = height + 'px';      }    }  },  beforeDestroy(){    document.body.style.backgroundColor = '#fff';  }}</script><style type="text/scss" lang="scss" scoped>.dealRecord-wrap{margin-bottom: 100px;  .title-contant{overflow: hidden;  /* 這個是重點 */    .title{height: 84px;padding: 0 24px;border-bottom: 1px solid #eaeaea;/*px*/      h3{height: 84px;font-size: 28px;color: #333;display: flex;align-items: center;float: left;;margin-left: 10px;}      .number{height: 84px;font-size: 24px;color: #666;display: flex;align-items: center;float: right;}      .number i{display: inline-block;width: 23px;height: 13px;background: url('../../assets/images/icon_dropup@2x.png');background-repeat: no-repeat;background-size: 23px 13px;background-position: right 6px center;padding-right: 35px;display: flex;align-items: center; float: right;transform:rotateX(0deg);}    }    .contant{background: #fff;transition: height 1s;  /* 這個也是重點 */      ul li{padding: 0 24px;height: 142px;display: flex;align-items: center;}      ul li:not(:last-child){border-bottom: 1px solid #f6f6f6;/*px*/}    }  }}</style>