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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构