uniapp开发11-v-for动态渲染list列表数据

uniapp开发11-v-for动态渲染list列表数据！下面是一个简单的动态渲染list列表数据的案例。我们现在还未对接真正的后台接口，所以我们直接在页面组件内部，返回一个json数组，模拟从服务器远程获取到的新闻列表信息。来达到渲染输出的效果。

---

1：代码：

<template>
	<view>
		<view  v-for="(item,index) in newsList"  :key="index" class="newslist" >
			
			<view class="row">
				<text>  第{{ (index+1) }} : {{item.title}}</text><br>
				<text>{{item.publish}}</text>
				<text>
					<navigator>查看详情</navigator>
				</text>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				newsList:[
					{
						id: 1,
						"title":"火箭研究取得新的进展",
						"publish":"2025-02-12"
					},
					{
						id: 2,
						"title":"张韶涵演唱会再次一票难求",
						"publish":"2025-05-01"
					},
					{
						id: 3,
						"title":"量子计算机水平遥遥领先全球",
						"publish":"2025-03-04"
					}
				]
			}
		},
	}
</script>

<style lang="scss">
	.newslist{
		background-color: #aaeeaa;
		.row{
			margin: 10px auto;
			margin-bottom: 4px;
			border: 1px solid #bbeeff;
		}
	}
</style>

---

2：渲染后的效果图：

---

3：我们简单的配置了下css颜色和边框！实际上，这种语法和vue.js里面如出一辙！如果大家之前学过vue.js的话，再来学习uniapp就会非常轻松了。