The unfolding and folding function of this data does not refer to the unfolding and folding of the content in a div, but...uh...
For example, after you v-for, there are a total of 20 results, and your business scenario is that only the first 5 results are displayed at the beginning, after clicking the expand button, the entire content is displayed, and after the collapse button is clicked, it is collapsed and displayed The first 5 data
Because it involves project content and non-disclosure agreement issues, there is no way to show you the effect here, anyway, you should be able to imagine it
Let me tell you about my initial thinking. At the beginning, I tried to watch a variable such as isShow, which is false by default. Using the ternary operator in my last blog, display testData2 (5 pieces of data) when it is false. After clicking the expand button, isShow changes to true, and then changes the displayed data to testData1.
But after spending more than an hour, I found that due to various reasons, this plan did not work. Finally, with the mentality of giving it a try, I wrote blindly, and it succeeded!
In fact, it is very simple. Write two sets of code directly in html, and change the value of isShow by clicking the expand and fold button to display different data. It's too late and I'm sleepy, so I won't talk about the details of the problem-solving process, just upload the final code directly. Believe that you are smart and can easily understand.
The above diagram explains:
1. At the beginning, only the first 5 items will be displayed. After clicking the expand button, the entire content will be displayed; after clicking the collapse button, it will be collapsed and the first 5 items of data will be displayed.
2. v-if="items.field.length > 5", the function is to hide the expand and fold buttons when the total number of data items is less than 5
Tips: Don’t change v-show to v-if here, don’t ignore the problem that v-if and v-for can’t be used together (if you don’t know, please move to Baidu, basic knowledge)