在jQuery里面，动态生成div元素需要进行html的拼接，拼接完成再将拼接的内容放到指定的div里面去，在vue中一般编写代码时都不需要操作DOM元素，那么点击按钮的时候，怎么动态生成自己想要的列表元素？
其实很简单：示例代码如下
<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>
欢迎关注【编程微刊】公众号，回复【领取资源】,500G编程学习资源干货免费送。
