uni-app点击按钮，生成列表元素

<template>
    <view class="content">
        <view class="cu-card case" v-for="(item,index) in productList" :key="index">
            <view class="cu-item shadow">
                <view class="cu-list menu-avatar">
                    <view class="cu-item">
                        <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
                        <view class="content flex-sub">
                            <view class="text-grey">打卡时间：{{item.beginTime}}</view>
                            <view class="text-gray text-sm flex justify-between">
                                <text class="cuIcon-locationfill margin-lr-xs">{{item.name}}</text>
                                <view class="text-gray text-sm">
                                    <text class="cuIcon-messagefill margin-lr-xs"></text> {{item.stats}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="cardcont">
            <view class="circle" @click="clickTest">上班打卡</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {        
                productList: [{
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                    name: '光大会展',
                    date: '2019-12-31',
                    beginTime: '2019-12-31   9:30',
                    endTime: '2019-12-31   9:30',
                    total: '3小时',
                    stats: '正常'
                }],
            }
        },
        onLoad() {
        },
        methods: {
            clickTest: function(e) {
                console.log(e);
                console.log('click');
                let listcard = {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                    name: '光大会展',
                    date: '2019-12-31',
                    beginTime: '2019-12-31   9:30',
                    endTime: '2019-12-31   9:30',
                    total: '3小时',
                    stats: '正常'
                }
                this.productList.push(listcard)
            },
        }
    }
</script>
<style>
    .cu-card>.cu-item {
        margin: 10px 14px 0px 14px;
    }
    .cu-list.menu-avatar>.cu-item {
        height: 87px;
    }
    .title {
        color: #8f8f94;
        margin-top: 50upx;
    }
    .ul {
        font-size: 30upx;
        color: #8f8f94;
        margin-top: 50upx;
    }
    .ul>view {
        line-height: 50upx;
    }
    /* 主要内容 */
    .uni-list-cell {
        border: 1px solid #f0f0f0;
        margin: 10upx 20upx;
    }
    .cardcont {
        position: absolute;
        bottom: 12px;
        left: 35%;
    }
    .circle {
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        text-align: center;
        background-image: linear-gradient(to bottom, lightblue, darkblue);
        font-size: 17px;
        color: #ffffff;
    }
</style>