vue 展开和折叠效果

<div class="open" :style="{height:blockHeight}">
  <div class="industry"  v-for="(item,index) in list"   v-bind:key="item.index" :class="activeIndex == index ? 'clickNow':''" @click="selectGoods(index)" >
    <span ref="liCon">{{item.industry}}</span>
  </div>
</div>

展开或折叠的按钮

<div class="show-box" @click="moreDown()">{{unfold}}</div>

export default {
  data(){
    return{   
      moreValue:0,
      blockHeight:'20px',
      unfold:'展开',
      list:[
        {
          industry:'行业精选',
        },  
      ],     
    }
  },

  methods:{  
   moreDown(){
        this.moreValue++
     if(this.moreValue % 2 !=1){
         this.blockHeight = '20px';
         this.unfold = '展开'
     }else {
         this.blockHeight = 'auto';
         this.unfold = '折叠'
     }
   },

  }
}