在jQuery里面，动态生成div元素需要进行html的拼接，拼接完成再将拼接的内容放到指定的div里面去，在vue中一般编写代码时都不需要操作DOM元素，那么点击按钮的时候，怎么动态生成自己想要的列表元素？
其实很简单：示例代码如下
代码语言：javascript复制<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://img.yuanmabao.com/zijie/pic/2020/02/11/5ga5n5gi5lh.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>
