uniapp动态渲染列表数据

uniapp列表数据渲染

<template>
	<view class="container">
		所有社团信息
		<uni-section title="全部社团" type="line">
			<uni-list v-for="elem in array" :key="elem.id">
				<!-- <uni-list-item :title="clubName" :note="clubInfo">
				</uni-list-item> -->
				<uni-card>
					<view>{{elem.clubName}}</view>
					<image :src="elem.clubPicture" style="width: 100;height: 200px;"></image>
					<text>{{elem.clubInfo}}</text>
				</uni-card>
			</uni-list>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array:[
					{
						clubId:1,
						clubName:"大自然定向越野社团",
						clubInfo:"爱看书的我马上加入了看书的队伍中,一排排书柜像一条条形态各异的长龙伏在地上,上面摆放着各种各样的书籍。我巡游在书海里,看这一本本颜色鲜艳的书皮,欣赏着一个个稀奇古怪的书名。我一排一排地翻阅着,像是一位军官,在从容不迫的检阅自己的部队。",
						clubPicture:"http://localhost:9000/photo/hello.jpg"
					},
					{
						clubId:2,
						clubName:"冠翔羽毛球社",
						clubInfo:"但是,那些组成“铜脚阵”的人却不以为然,根本不顾旁人的感受,就这么把脚“拦”在人家前面,造成了大家的不便。可是,我便没有放在心上,便放下书,也坐在书柜上,在那里精挑细选,经过一次次的选拔,经过一层层的选拔,被我挑中的书却只有寥寥几本。我便来到楼上,再次精挑细选。",
						clubPicture:"http://localhost:9000/photo/hello.jpg"
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

posted @ 2022-04-13 19:00  LilyFlower  阅读(1259)  评论(0编辑  收藏  举报