平武建站

vue-resourse中怎么输出json数据

这篇文章给大家介绍vue-resourse中怎么输出json数据，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联建站专注于克井企业网站建设,响应式网站建设,商城网站建设。克井网站建设公司,为克井等地区提供建站服务。全流程按需网站设计，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

1.demo目录，不要管index.html和index.js

vue-resourse中怎么输出json数据

2.html页面 vue-resourse-josn1.1.html展示json中的数据






vue-resourse-json




    


编号：{{item.id}}
    
作者：{{item.author}}
    
书名{{item.name}}
    
价格：{{item.price}}
    
出版时间{{item.time}}
 

3.js vue-resourse-json.js

var app = new Vue({
el:"#app",
data:{
//声明空数组，进行数据接收，最后传递到前端页面
itemList:[], 
},
//向data数组里添加数据
mounted:function(){
this.getData();
},
methods: {
getData:function () {
var self = this;
this.$http.get("static/data/list_json.json").then(function (res) {

console.log(res);

//var lens = res.body.lists.length;
//console.log(lens);
//获取了当前数组的长度，为3
for(var i= 0,len=res.body.lists.length;i
4.json为list_josn.json
下面是json中的数据
{
"lists":[
{
"id":"1",
"author":"小华",
"name":"《春天来了》",
"price":"23",
"time":"1998-03-12"
},
{
"id":"2",
"author":"老舍",
"name":"《济南的冬天》",
"price":"32",
"time":"1956-12-09"
},
{
"id":"3",
"author":"朱自清",
"name":"《背影》",
"price":"40",
"time":"1943-09-12"
}
]
}
5.结果输出
vue-resourse中怎么输出json数据
关于vue-resourse中怎么输出json数据就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
            
            
                            

                分享标题：vue-resourse中怎么输出json数据                

                URL分享：http://pwwzsj.com/article/peshcg.html

其他资讯