数据返回对象格式，进行渲染

原创于 2024-03-27 16:27:53 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #javascript #前端

该篇文章介绍了如何在Vue.js应用中，通过API获取油总量数据后，遍历并将数据动态地显示在一个列表中，每个列表项包含文本和金额信息。

在这里插入图片描述

<view class="balance">
			<view class="balBox" v-for="(item,index) in balList" :key="index">
				<view>
					{{item.text}}
				</view>
				<view>{{item.money}}</view>
			</view>
		</view>

	export default {
		data() {
			return {
			balList: [],
			}
		},
		method：{
			getOilTotal() {
				oilTotal(this.params).then(res => {
				//进行for循环
					for (let item in res.data) {
						let obj = {
							money: res.data[item],
							text: item
						}
						//将对象追加到数组
						this.balList.push(obj)
					}
				})
			},}
	}

在这里插入图片描述