vue 默认显示三条数据，点击加载更多按钮加载三条

vue 默认显示三条数据，点击加载更多按钮加载三条

主要使用element-ui 滚动加载

<template>
    <div class="infinite-list-wrapper" style="overflow:auto">
        <ul
                class="list"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabled">
            <li v-for="(i,index) in countData" :key="index" class="list-item">{{ i }}</li>
        </ul>
        <p v-if="loading" @click="more">加载更多</p >
        <p v-if="noMore">没有更多了</p >
    </div>
</template>

<script>
    export default {
        data () {
            return {
            	// 数据列表
                count: [1,2,3,4,5,6,7,8,9,0],
                loading: false,
                //默认显示条数
                cou: 3,
            }
        },
        computed: {
            noMore() {
            	// 判断加载条数是否大于列表数据长度
                return this.cou > this.count.length;
            },
            disabled() {
            	// 加载完成
                return this.loading || this.noMore;
            },
            countData() {  // 计算属性使用切片生成新数组
                let data = [];
               	// 大于三条，使用切片，返回新数组
                if (this.count.length > 3) {
                    data = this.count.slice(0, this.cou);
                    return data;
                } else {
                	// 否则使用原来数组，不进行切片处理
                    data = this.count
                    return data;
                }

            },
        },
        methods: {
            load() {
                this.loading = true;
            },
            more() {
            	// 每次点击加三条 
                this.cou += 3;
                this.loading = false;
            },
        }
    }
</script>