v-for方法遍历数组，从后端获取数据，前端取值调用uni app

最新推荐文章于 2025-05-26 10:31:37 发布

原创最新推荐文章于 2025-05-26 10:31:37 发布 · 1.3w 阅读

23 ·

CC 4.0 BY-SA版权

HBuilderX 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用v-for方法遍历数组，从前端调用后端API获取数据，并展示数据处理和页面跳转的实现方式。通过实例展示了在Vue.js中如何将后端返回的数据绑定到前端视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for方法遍历数组，从后端获取数据，前端取值调用

template写法

	<!-- row数组中的每一列 -->
			<!-- cateId为后端详情页时要取得值id -->
<template>
        <view>
            <navigator class="category" v-for="(row, index) in categoryList" :key="index" :url="'../info/home-category-info?Id='+row.cateId">
				<view class="img">
					<image :src="row.catePic" ></image>
				</view>
				<view class="text">{{ row.cateName }}</view>
			</navigator>
		</view>
</template>

script中写法

<script>
//把this的值重定义，不然会丢失
	var _self;
	export default {
		data() {
			return {
                 // 定义一下分类菜单
				categoryList: [],
            }
        },
           //页面加载时调用
           // e用来给他的跳转页面传数据，就是判断破、id用
		onLoad: function(e) {
            //把this的值重定义
           //页面加载这方法gethome            
			_self = this;
			this.gethome();
        }，
        methods:{
            //在methods里定义一个方法gethome
			gethome: function() {		
				// localStorage.getItem('data')
				var Token=localStorage.getItem('data')
				// console.info(localStorage.getItem('data'))
				uni.request({
					url: this.baseURL + '/lingyoutuo_war/index/index.do',
					dataType: 'json',
                    //POST请求要加的header请求头
					method: 'POST',
					header: {
						// 'accessToken':'data',
						'accessToken':Token,
						'content-type': 'application/x-www-form-urlencoded',
					},
                     //把后端的数组遍历到前端数组里
					success(res) {
						_self.categoryList = res.data.data.serviceList;

					}
				});
			}
          

        }
}

跳转页面

正常取值了

           <view class="can1">
               <text class="txt">
                   <text class="txt1">{{items.cateName}}</text>
               </text>
           </view>
           <text class="txt-nav">{{items.cateDesc}}</text>
       </view>

	var _self;
	export default {
		data() {
			return {
                //定义一个数组用来取后端传的值
                items: [],
                定义一个id给后端传值掉接口
				Id: Number,
                    }
                }，
               //e就是上个页面的id标识
 		    onLoad: function(e) {
			
			_self=this;
            //判断用户登录的状态
			var Token = localStorage.getItem('data')
			uni.request({
				url: this.baseURL + '/lingyoutuo_war/service/getServiceDtl.do',
				method: 'POST',
				data: {
                     把e.Id给后端的cateId进行校验
					cateId:e.Id,
				},
				header: {
                    //登录状态给header中的accessToken,就可以读取登录页面取得用户值来判断用户是否登录
					'accessToken': Token,
					'content-type': 'application/x-www-form-urlencoded',
				},
				success(res) {
					_self.items = res.data.data;
           	
    }

如果接口数据里有数组形式