vue的爬坑之路（五）之基于vuecli li列表的显示隐藏

同志们，好久没有更新博客了，我之所以如此漫长是因为我踩坑踩的实在抽不出时间来写总结了，每天靠着百度活着

不多聊了，今天总结的只是一个很小的功能，大概是因为功能太小所以我根本百度不到，折磨了我许久，终于出头了，想要保存到博客里供大家参考，希望能帮到各位刚学习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声明的时候是数组不是变量，变量可以使用‘=’号，数组是不可以的哦

好了，以上就是我很细心的写完的一篇新的随笔，各位大神多多指点，我是小菜鸟有什么不对的地方望指出，谢谢！

我要接着去奋斗了，拜拜喽！