这个数据的展开折叠功能，并非指的是一个div里的内容展开折叠，而是...呃...

举个例子吧，你v-for后，一共有20条结果，而你的业务场景是，最开始只展示前5条，点击展开按钮后，展示全部内容，点击折叠按钮后，收起，展示前5条数据

因为涉及到项目内容与保密协议问题，这里没法儿给大家展示效果了，反正你应该能想的到

讲一下我最开始的思路吧，最开始我尝试过，通过watch一个变量比如说isShow，默认为false。用上我上一条博客里的三目运算符的写法，当它为false时展示testData2(5条数据)，点击展开按钮后，isShow改变为true，然后改变展示的数据为testData1。

但是在花了一个多小时后，发现因为各种原因，这个方案行不通，最后抱着试一试的心态，瞎写，结果成功了！

其实很简单，直接在html里写两套代码，通过点击展开折叠按钮改变isShow的值，展示不同的数据。时间太晚了，困了，就不讲解决问题的过程细节了，直接上最终代码吧。相信聪明的你能轻松理解。

上图解释：

1、最开始只展示前5条，点击展开按钮后，展示全部内容；点击折叠按钮后，收起，展示前5条数据

2、v-if="items.field.length > 5"，作用是当总数据条数少于5条时，隐藏展开折叠按钮

Tips：v-show这里千万不要改成v-if，别忽略v-if和v-for不能连用的问题(不清楚的请移步百度，基础知识)