v-for遍历获取数组的前n个数据、中间范围数据、末尾n条数据的

  v-for遍历获取数组的前n个数据、中间范围数据、末尾n条数据的方法如下：

一. 获取小于0到5之间的数据：（两种方法）

第一种方法：itemList.slice(0, 5)，获取itemList数组的前5个元素

<view class="detailed" v-for="(item, index) in itemList.slice(0, 5)" :key="index">
    <view class="detailed-title">
        <view class="data-description">明细{{index + 1}}</view>
        <view class="details" @tap="showDetails(item, index)">明细详情</view>
    </view>
    <view class="text" v-for="item2 in tableBodyDatas" v-if="item2.isShow && item2.isRequired">
        <view class="title">{{item2.text}}</view>
        <view class="name">
            {{getDatas(item, item2)}}
        </view>
    </view>
</view>

第二种方法：v-if="index < 5"，获取itemList数组的前5个元素

<view class="detailed" v-for="(item, index) in itemList" v-if="index < 5" :key="index">
    <view class="detailed-title">
        <view class="data-description">明细{{index + 1}}</view>
        <view class="details" @tap="showDetails(item, index)">明细详情</view>
    </view>
    <view class="text" v-for="item2 in tableBodyDatas" v-if="item2.isShow && item2.isRequired">
        <view class="title">{{item2.text}}</view>
        <view class="name">
            {{getDatas(item, item2)}}
        </view>
    </view>
</view>

二. 获取5到10之间的数据：itemList.slice(5, 10)

<view class="detailed" v-for="(item, index) in itemList.slice(5, 10)" :key="index">
    <view class="detailed-title">
        <view class="data-description">明细{{index + 1}}</view>
        <view class="details" @tap="showDetails(item, index)">明细详情</view>
    </view>
    <view class="text" v-for="item2 in tableBodyDatas" v-if="item2.isShow && item2.isRequired">
        <view class="title">{{item2.text}}</view>
        <view class="name">
            {{getDatas(item, item2)}}
        </view>
    </view>
</view>

三. 获取最后5条数据：itemList.slice(itemList.length - 5, itemList.length)

<view class="detailed" v-for="(item, index) in itemList.slice(itemList.length - 5, itemList.length)" :key="index">
    <view class="detailed-title">
        <view class="data-description">明细{{index + 1}}</view>
        <view class="details" @tap="showDetails(item, index)">明细详情</view>
    </view>
    <view class="text" v-for="item2 in tableBodyDatas" v-if="item2.isShow && item2.isRequired">
        <view class="title">{{item2.text}}</view>
        <view class="name">
            {{getDatas(item, item2)}}
        </view>
    </view>
</view>