1.实现思路

数据存放到showList数组中，通过控制showList元素的个数来决定显示的个数。未点击展示时，showList只存放一定数目的数据，当点击展开时，showList存放全部数据。

① 数据部分

    data(){
        return{
            literarys:["中国先当代随笔","名家作品","文集",'纪实文学',"中国古诗词","中国现当代诗歌",
                    "外国诗歌","中国古代随笔","外国随笔","民家文学","戏剧","文学评论与鉴赏","文学理论"],
            showAll:false,
        }
    }

② 逻辑部分

1-1 全部数据：将要显示的全部数据，放在literarys数组中。
1-2 展开前的数据：在没有点击“展开”之前，页面已经显示了5个数据。这5个数据可以通过循环遍历literarys数组的前5个，将literarys前5个放在一个showList空数组中，最后返回空数组。
1-3 展开后的数据：如果要展示全部数据，很明显，应该将literarys中的数据都存到showList数组中。

    computed:{
        showList:function(){
            if(this.showAll == false){   //不显示全部数据               
                var showList = [];　　　　　//空数组　　　　　　　　　　
                if(this.literarys.length > 5){　　　//只显示5条　　　　
                    for(var i=0;i<5;i++){
                        showList.push(this.literarys[i]); //将数组的前5条存放到showList数组中
                    }
                }else{
                    showList = this.literarys  //个数足够显示，不需要在截取
                }
                return showList;　　　　　　　　　　　　　　　　
            }else{  //显示全部数据
                return this.literarys;
            }
        },
        word:function(){ //点击显示部分
            if(this.showAll == false){　　　　　　　　　　　
                return '展开'
            }else{
                return '收起'
            }
        }
    },

③ HTML结构部分

<ul>
  <li v-for="(item,index) in showList" :key=index >{{item}}</li>
  <li @click="showAll = !showAll" class="show-more">{{word}}</li>
</ul>

这个是简单版的，如果想要实现上面的效果，需要一些样式，下面是带有样式的html：

<ul>
 <li v-for="(item,index) in showList" :key=index :class="{hiddenline:index==showList.length-2 ||index== showList.length-1}"> 
   <router-link to="/" >{{item}}</router-link>
   <span class="line" :class="{hidden1:index%3==2}"</span> 
  </li>
  <li class="none-line">
    <span @click="showAll = !showAll" class="show-more">
        <b>{{word}}</b>
    </span>
 </li>
</ul>

样式[less语法]

.warp-txt{
            ul{
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                padding:2%;
                box-sizing: border-box;
                position: relative;
                li{
                    width: 33.33%;
                    text-align: center;
                    display: flex;
                    height: 44px;
                    position: relative;
                    border-bottom: 1px solid #e1e1e1;
                    a{
                        text-decoration: none;
                        color: #4D525D;
                        font-size: 0.8rem;
                        margin:auto;
                    }   
                }
                .hiddenline{
                    border-bottom: 0px;
                }
                .line{
                    content: "";
                    height: 14px;
                    width: 1px;
                    background-color: #e1e1e1;
                    position: absolute;
                    top:35%;
                    right:0%;
                }
                .hidden1{
                    width: 0px;
                }
                .none-line{
                    border-bottom: 0px;
                    .show-more{
                        color: #BABABA;
                        font-size: 0.5rem;
                        border-bottom: 0px;
                        margin:auto;
                    }
                }
            }  
        }

————————————————
哈哈，下面是小编的博客哟_{请多多支持呢O(∩_∩)O哈哈}

原文链接：https://blog.csdn.net/weixin_43332684/article/details/107476809