vue的爬坑之路（五）之----基於vue-cli li列表的顯示隱藏

同志們，好久沒有更新博客了，我之所以如此漫長是因為我踩坑踩的實在抽不出時間來寫總結了，每天靠着百度活着😭

不多聊了，今天總結的只是一個很小的功能，大概是因為功能太小所以我根本百度不到，折磨了我許久，終於出頭了，想要保存到博客里供大家參考，希望能幫到各位剛學習vue-cli的小白們😊

直接粘代碼，等等還是先看看效果把，明顯是demo，有點粗糙哈哈哈，大體就是點擊下拉顯示隱藏部分代碼

 

 這是html部分代碼

<template>
    <div id='searchindex'>
        <ul>
            <li v-for="(item,index) in list">
                <p v-bind:class="[showlist[index]?'liactive' : '']" >{{item}}</p>
                <i @click='iconarrow(index)'>下拉</i>
            </li>
            <li>
                <p class="liactive">考拉-海購網站精選,網易自營,假一賠十,新人專享送1000元大禮包.考拉-用更少的錢過更好的生活!網易考拉海購-網易旗下_正品低價_海外直采_海外直郵.網易考拉是國內領先的跨境購物商城,輕松購遍海外進口母嬰,進口美食 ,進口美妝、進口電子數碼,更多產品正陸續...</p>
                <i>下拉</i>
            </li>
        </ul>
    </div>
</template>

 js部分代碼

<script>
    export default{
        data(){
            return{
                list:[
                    '考拉-海購網站精選,網易自營,假一賠十,新人專享送1000元大禮包.考拉-用更少的錢過更好的生活!網易考拉海購-網易旗下_正品低價_海外直采_海外直郵.網易考拉是國內領先的跨境購物商城,輕松購遍海外進口母嬰,進口美食 ,進口美妝、進口電子數碼,更多產品正陸續...',
                    '考拉-海購網站精選,網易自營,假一賠十,新人專享送1000元大禮包.考拉-用更少的錢過更好的生活!網易考拉海購-網易旗下_正品低價_海外直采_海外直郵.網易考拉是國內領先的跨境購物商城,輕松購遍海外進口母嬰,進口美食 ,進口美妝、進口電子數碼,更多產品正陸續...'
                ],
                showlist:[
                    true,false
                ]
            }
        },
        methods:{
            iconarrow(index){
                this.showlist.splice(index,1,!this.showlist[index])
            }
        }
    }
</script>

下面是css啦，千萬不要落下

<style scoped>    
#searchindex{
    width: 100%;
    height: 100%;
}
    ul li{
        width: 100%;
        font-size: 26px;
        margin-top: 20px;
        background-color: pink;
        overflow: hidden;
        position: relative;
    }
    ul li p{
        
        height: 150px;
        margin: 20px;
        box-sizing: border-box;
        overflow: hidden;
    }
    ul li p.liactive{
        height: 200px;
    }
    i{
        display: inline-block;
        font-size: 28px;
        height: 40px;
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: #000;
        color: #fff;
    }
</style>

主要原理還是說在點擊下拉按鈕的時候給他添加class名稱，增加列表高度，從而顯示隱藏部分，難點就在於索引值，我一開始就是沒辦法實現當前點擊的模塊顯示隱藏，試了很多種辦法，希望對大家有幫助

當然后期還是會換成后台給的動態數據，那么怎么將判斷顯示顯示隱藏的數組變成動態的呢？

在你請求后台數據的方法里面遍歷數據長度，然后賦值false，push到你的showlist方法里

for(var i=0;i<response.data.data.length;i++){
    this.showlist.push(false) 
}

還有一個問題是為什么我在點擊事件里寫的方法是用splice，而不是直接this.showlist=!this.showlist呢，畢竟網上百度來的大部分都是這個樣子寫的，原因就是‘=’號不會觸發雙向數據綁定，因為我們在showlist聲明的時候是數組不是變量，變量可以使用‘=’號，數組是不可以的哦

好了，以上就是我很細心的寫完的一篇新的隨筆，各位大神多多指點，我是小菜鳥有什么不對的地方望指出，謝謝！

我要接着去奮斗了，拜拜嘍！