vue 循环遍历多层json_vue将ajax返回的json数据循环遍历到html页面上

本文介绍了如何在Vue.js应用中处理并显示从ajax获取的多层JSON数据。通过实例化Vue,设置数据绑定,并将ajax返回的JSON数据赋值给Vue实例的属性,实现数据在HTML页面上的展示。同时,文章提供了完整的JS和HTML代码示例,包括点击事件处理和数据传递。
摘要由CSDN通过智能技术生成

前提

1、下载开发版本的vue.js,这样可以看到报什么错误,生产版本是不报错误的

2、ajax作为第三方接口,可以返回后台的数据

要点

vue只要在script里面实例化一次就可以了

以下是本人开发项目实践成功的代码

js部分讲解

实例化vue,

var ap=new Vue({

el: '#allpost',

data: {

sites:[]

},

});

以上知识点讲解

1、el:"#allpost"对应html页面的id="post"

f8d5fe14d9a3f4175ca3171531fce250.png

2、sites是集合

3、怎么把ajax返回的json集合给vue的sites

ap.sites=ret;就可以了

4、ret如果是集合的形式,console.log(ret)

7c908b62b3db7b58b26068c0765991f9.png

5、打印字符串形式的ret ,并且利用https://www.json.cn/查看格式

<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值