vue-resourse将json数据输出实例

最新推荐文章于 2024-04-13 10:37:13 发布

weixin_34418883

最新推荐文章于 2024-04-13 10:37:13 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

文章标签： json 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/zhengao/p/6519778.html

本文介绍使用Vue-resource插件从本地加载JSON数据，并将其显示在HTML页面上的过程。通过实例展示了如何利用Vue的生命周期钩子mounted来发起HTTP请求，解析响应数据，并填充到Vue实例的data属性中，最终实现动态渲染。

1.本文主要讲v-resourse 获取json数据并传递到DOM中

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

3.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>

4.js vue-resourse-json.js

5.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"
}
]
}