vue-resourse将json数据输出实例

 更新时间:2017年03月08日 15:55:15   作者:gz_blog   我要评论

这篇文章主要为大家详细介绍了vue-resourse将json数据输出实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resourse-json</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in itemList" :id="item.id" style="list-style-type: none;">
编号:{{item.id}}</br>
作者:{{item.author}}</br>
书名{{item.name}}</br>
价格:{{item.price}}</br>
出版时间{{item.time}}</br>
</li>
</ul>
</div> 
<script src="static/js/libs/vue.js"></script>
<script src="static/js/libs/vue-resource.min.js"></script>
<script type="text/javascript" src="static/js/vue-resourse-json.js"></script>
</body>
</html>

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<len;i++){
//已经获取json数组中的数据,接下来如何传递到前端页面中
//获取全部数据
var selData = res.body.lists[i]; 
//console.log(selData);
//获取数组中的部分数据
var part = res.body.lists[i].name;
//console.log(part);
//将获取的数据push到空的数组中itenList,
self.itemList.push(selData);
}
})
}
}
});

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.结果输出

6.总结:主要理清数据请求和传递的流程就行了。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • vue路由中前进后退的一些事儿

    vue路由中前进后退的一些事儿

    这篇文章主要给大家介绍了关于vue路由中前进后退的一些事儿,文中通过示例代码介绍的非常详细,对大家学习或者使用vue路由具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • Vue中img的src属性绑定与static文件夹实例

    Vue中img的src属性绑定与static文件夹实例

    本篇文章中主要介绍了Vue中img的src属性绑定与static文件夹实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-05-05
  • 对vue事件的延迟执行实例讲解

    对vue事件的延迟执行实例讲解

    今天小编就为大家分享一篇对vue事件的延迟执行实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解几十行代码实现一个vue的状态管理

    详解几十行代码实现一个vue的状态管理

    这篇文章主要介绍了详解几十行代码实现一个vue的状态管理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue使用drag与drop实现拖拽的示例代码

    vue使用drag与drop实现拖拽的示例代码

    本篇文章主要介绍了vue使用drag与drop实现拖拽的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue项目中使用better-scroll实现一个轮播图自动播放功能

    Vue项目中使用better-scroll实现一个轮播图自动播放功能

    better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果。这篇文章主要介绍了Vue项目中使用better-scroll实现一个轮播图,需要的朋友可以参考下
    2018-12-12
  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    今天小编就为大家分享一篇对vue2.0中.vue文件页面跳转之.$router.push的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue-cli 3.x 修改dist路径的方法

    vue-cli 3.x 修改dist路径的方法

    今天小编就为大家分享一篇vue-cli 3.x 修改dist路径的方法,具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    vue2.0路由切换后页面滚动位置不变BUG的解决方法

    下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • django中使用vue.js的要点总结

    django中使用vue.js的要点总结

    在本篇文章里小编给各位整理了关于django中使用vue.js需要注意的地方以及相关知识点,需要的朋友们跟着学习参考下。
    2019-07-07

最新评论