uniapp動態渲染列表資料
阿新 • • 發佈:2022-04-13
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>