同志們，好久沒有更新博客了，我之所以如此漫長是因為我踩坑踩的實在抽不出時間來寫總結了，每天靠着百度活着😭
不多聊了，今天總結的只是一個很小的功能，大概是因為功能太小所以我根本百度不到，折磨了我許久，終於出頭了，想要保存到博客里供大家參考，希望能幫到各位剛學習vue-cli的小白們😊
直接粘代碼，等等還是先看看效果把，明顯是demo，有點粗糙哈哈哈，大體就是點擊下拉顯示隱藏部分代碼
這是html部分代碼
1 <template> 2 <div id='searchindex'> 3 <ul> 4 <li v-for="(item,index) in list"> 5 <p v-bind:class="[showlist[index]?'liactive' : '']" >{{item}}</p> 6 <i @click='iconarrow(index)'>下拉</i> 7 </li> 8 <li> 9 <p class="liactive">考拉-海購網站精選,網易自營,假一賠十,新人專享送1000元大禮包.考拉-用更少的錢過更好的生活!網易考拉海購-網易旗下_正品低價_海外直采_海外直郵.網易考拉是國內領先的跨境購物商城,輕松購遍海外進口母嬰,進口美食 ,進口美妝、進口電子數碼,更多產品正陸續...</p> 10 <i>下拉</i> 11 </li> 12 </ul> 13 </div> 14 </template>
js部分代碼
1 <script> 2 export default{ 3 data(){ 4 return{ 5 list:[ 6 '考拉-海購網站精選,網易自營,假一賠十,新人專享送1000元大禮包.考拉-用更少的錢過更好的生活!網易考拉海購-網易旗下_正品低價_海外直采_海外直郵.網易考拉是國內領先的跨境購物商城,輕松購遍海外進口母嬰,進口美食 ,進口美妝、進口電子數碼,更多產品正陸續...', 7 '考拉-海購網站精選,網易自營,假一賠十,新人專享送1000元大禮包.考拉-用更少的錢過更好的生活!網易考拉海購-網易旗下_正品低價_海外直采_海外直郵.網易考拉是國內領先的跨境購物商城,輕松購遍海外進口母嬰,進口美食 ,進口美妝、進口電子數碼,更多產品正陸續...' 8 ], 9 showlist:[ 10 true,false 11 ] 12 } 13 }, 14 methods:{ 15 iconarrow(index){ 16 this.showlist.splice(index,1,!this.showlist[index]) 17 } 18 } 19 } 20 </script>
下面是css啦，千萬不要落下
1 <style scoped> 2 #searchindex{ 3 width: 100%; 4 height: 100%; 5 } 6 ul li{ 7 width: 100%; 8 font-size: 26px; 9 margin-top: 20px; 10 background-color: pink; 11 overflow: hidden; 12 position: relative; 13 } 14 ul li p{ 15 16 height: 150px; 17 margin: 20px; 18 box-sizing: border-box; 19 overflow: hidden; 20 } 21 ul li p.liactive{ 22 height: 200px; 23 } 24 i{ 25 display: inline-block; 26 font-size: 28px; 27 height: 40px; 28 position: absolute; 29 bottom: 0; 30 right: 0; 31 background-color: #000; 32 color: #fff; 33 } 34 </style>
主要原理還是說在點擊下拉按鈕的時候給他添加class名稱，增加列表高度，從而顯示隱藏部分，難點就在於索引值，我一開始就是沒辦法實現當前點擊的模塊顯示隱藏，試了很多種辦法，希望對大家有幫助
當然后期還是會換成后台給的動態數據，那么怎么將判斷顯示顯示隱藏的數組變成動態的呢？
在你請求后台數據的方法里面遍歷數據長度，然后賦值false，push到你的showlist方法里
1 for(var i=0;i<response.data.data.length;i++){ 2 this.showlist.push(false)
3 }
還有一個問題是為什么我在點擊事件里寫的方法是用splice，而不是直接this.showlist=!this.showlist呢，畢竟網上百度來的大部分都是這個樣子寫的，原因就是‘=’號不會觸發雙向數據綁定，因為我們在showlist聲明的時候是數組不是變量，變量可以使用‘=’號，數組是不可以的哦
好了，以上就是我很細心的寫完的一篇新的隨筆，各位大神多多指點，我是小菜鳥有什么不對的地方望指出，謝謝！
我要接着去奮斗了，拜拜嘍！