如何将移动端部分数据渲染

<template>
    <view class="kind">
        <view class="list" v-for="item in findAllCategory" :key="item.id">
            <image :src="item.icon" mode="">image>
            <view class="name">{{{item.name}}</view>
        
    

请问一下大家,当上面的接口调用成功之后,将数据渲染到页面上,如何才能实现在渲染数据的过程中只将 items 下的 第0项中 的 children里面的四项数据渲染出来,这里搞不出来,

this.findAllCategory = res.data.items[0].children;

<template>
    <view class="kind">
        <view class="list" v-for="item in findAllCategory" :key="item.id">
            <image :src="item.icon" mode=""></image>
            <view class="name">{{{item.name}}</view>
        </view>
    </view>
</template>
 
<script>
    import {
        findAllCategory
    } from '@/api/kind/index.js'
    export default {
        data() {
            return {
                findAllCategory: [],
            };
        },
        onLoad(option) {
            findAllCategory().then(res => {
                console.log("创意", res);
                this.findAllCategory = res.data.items[0].children;
            })
        }
    }
</script>
 
<style lang="scss" scoped>
    @import 'kind.scss'
</style>

用js对数据进行处理后才传入findAllCategory这个数组中，你可以用forEach 循环然后判断他是不是数组中第0项，是就结束循环取出值就行了

• 可以查看手册：vue.js 条件渲染 中的内容

将

this.findAllCategory = res.data.items;

改为

this.findAllCategory = res.data.items[0].children

        <view class="list" v-if="findAllCategory && findAllCategory[0]" v-for="item in findAllCategory[0].children" :key="item.id">
            <image :src="item.icon" mode=""></image>
            <view class="name">{{{item.name}}</view>
        </view>