1.實(shí)現(xiàn)思路

??數(shù)據(jù)存放到showList數(shù)組中糊探，通過控制showList元素的個(gè)數(shù)來決定顯示的個(gè)數(shù)。未點(diǎn)擊展示時(shí)扣汪，showList只存放一定數(shù)目的數(shù)據(jù)断楷，當(dāng)點(diǎn)擊展開時(shí)，showList存放全部數(shù)據(jù)崭别。

① 數(shù)據(jù)部分

    data(){
        return{
            literarys:["中國先當(dāng)代隨筆","名家作品","文集",'紀(jì)實(shí)文學(xué)',"中國古詩詞","中國現(xiàn)當(dāng)代詩歌",
                    "外國詩歌","中國古代隨筆","外國隨筆","民家文學(xué)","戲劇","文學(xué)評(píng)論與鑒賞","文學(xué)理論"],
            showAll:false,
        }
    }

② 邏輯部分

1-1 全部數(shù)據(jù)：將要顯示的全部數(shù)據(jù)冬筒，放在literarys數(shù)組中。
1-2 展開前的數(shù)據(jù)：在沒有點(diǎn)擊“展開”之前茅主，頁面已經(jīng)顯示了5個(gè)數(shù)據(jù)舞痰。這5個(gè)數(shù)據(jù)可以通過循環(huán)遍歷literarys數(shù)組的前5個(gè)，將literarys前5個(gè)放在一個(gè)showList空數(shù)組中诀姚，最后返回空數(shù)組响牛。
1-3 展開后的數(shù)據(jù)：如果要展示全部數(shù)據(jù)，很明顯赫段，應(yīng)該將literarys中的數(shù)據(jù)都存到showList數(shù)組中呀打。

    computed:{
        showList:function(){
            if(this.showAll == false){   //不顯示全部數(shù)據(jù)               
                var showList = [];　　　　　//空數(shù)組　　　　　　　　　　
                if(this.literarys.length > 5){　　　//只顯示5條　　　　
                    for(var i=0;i<5;i++){
                        showList.push(this.literarys[i]); //將數(shù)組的前5條存放到showList數(shù)組中
                    }
                }else{
                    showList = this.literarys  //個(gè)數(shù)足夠顯示，不需要在截取
                }
                return showList;　　　　　　　　　　　　　　　　
            }else{  //顯示全部數(shù)據(jù)
                return this.literarys;
            }
        },
        word:function(){ //點(diǎn)擊顯示部分
            if(this.showAll == false){　　　　　　　　　　　
                return '展開'
            }else{
                return '收起'
            }
        }
    },

③ HTML結(jié)構(gòu)部分

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

這個(gè)是簡(jiǎn)單版的糯笙，如果想要實(shí)現(xiàn)上面的效果贬丛，需要一些樣式，下面是帶有樣式的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;
                    }
                }
            }  
        }

————————————————
哈哈炬丸，下面是小編的博客喲_{請(qǐng)多多支持呢O(∩_∩)O哈哈}

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者