塘厦镇做网站湖北建设厅官方网站

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就会非常轻松了。