vue实现点击展开，点击收起效果

要求：

默认列表只显示6条数据，点击‘展开更多’按钮，显示所有列表，点击‘收起’按钮，列表恢复默认6条

图片效果

直接上代码

<template>
  <div class="enterprise">
    <!-- 内容区 -->
    <div class="main">
      <!-- 热门产品 -->
      <div class="main-area products">
        <div class="layer">
          <div class="area-title">
            <span class="ico-tit-left"></span><span class="tit-text">热门产品</span><span class="ico-tit-right"></span>
          </div>
          <div class="con">
            <ul class="product-ul">
              <li v-for="item,index in productLst" :key="index" v-if="showProductMore ? index < 6 : index + 1">
                <img :src="item.pic" />
                <div class="info">
                  <h2>{{item.title}}</h2>
                  <p>{{item.mgs}}</p>
                </div>
              </li>
            </ul>
            <div class="btn-showMore" v-if="productLst.length > 6">
              <el-button type="primary" @click="showProductMore = !showProductMore">{{showProductMore ? '展开更多':'收起'}}<i
                  class="el-icon-plus"></i></el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'enterprise',
  data () {
    return {
      //显示更多--热门产品
      showProductMore: true,
      //热门产品
      productLst: [
        { pic: require('@/assets/img/enterprise/product-pic1.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic2.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic3.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic4.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic5.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic6.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic4.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic5.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', },
        { pic: require('@/assets/img/enterprise/product-pic6.jpg'), title: '数字政府', mgs: '提升园区运营能力和服务水平，打造管理规范、运转高效、服务一流的智慧产业高地，实现兴业、增效', }
      ],
    }
  },
  methods: {
  }
}
</script>

<style scoped>
.layer {
  width: 1300px;
  margin: 0 auto;
}
/* 内容区 */
.main-area{
  padding-bottom: 46px;
} 
.area-title{
  display: flex;
  align-items: center;
  justify-content: center;
  padding:60px 0;
}
.tit-text{
  font-size: 40px;
  color: #393939;
  line-height: 56px;
  letter-spacing: 5px;
  padding:0 68px;
  font-weight: 500;
}
.ico-tit-left,.ico-tit-right{
  width:143px;height: 18px;
  display: block;
}
.ico-tit-left{
  background: url(~assets/img/enterprise/ico-tit-left.png) center 0 no-repeat;
}
.ico-tit-right{
  background: url(~assets/img/enterprise/ico-tit-right.png) center 0 no-repeat;
}
.product-ul{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:wrap
}
.product-ul li{
  width: 49%;
  display: flex;
  background: #F3F3F3;
  margin-bottom:24px;

}
.product-ul li img{
  width:280px;height: 270px;
}
.product-ul li .info{
  width:350px;
  padding:60px 24px 10px;
}
.product-ul li .info p{
  font-size: 18px;
}
.el-button{
  border-radius:0;
  padding: 14px 20px;
}
.btn-showMore{
  margin-top:20px;
  display: flex;
  justify-content: center;
}
.btn-showMore .el-button--primary{
  background-color: #2B5077;
  border-color: #2B5077;
}
</style>