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.总结：主要理清数据请求和传递的流程就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js学习笔记:如何加载本地json文件

    vue.js学习笔记:如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成.具体项目结构如下: 1:打包好的文件在此,http://pan.baidu.com/s/1dFCAzux 2:我们找到bulid>dev-server.js,然后打开 3:在里面加入这

  • 详解通过JSON数据使用VUE.JS

    最近接到一个比较简单的项目,不准备使用数据库,打算用JSON数据就可以了.结合当前火热的VUE.JS进行数据渲染. 尽管不打算使用数据库,可是一般的操作增删查改依旧是少不了的.如果使用到数据库的话,不妨做一个API出来,那么网站.APP等都可以依照这个进行操作.在这篇文章里面,我们只是打算简单的引用而已. 下面先来看看我的JSON文件,这里是一个类别文档Category.json: { "msg": "ok", "data":[ { "

  • 简单的vue-resourse获取json并应用到模板示例

    不说废话上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue js</title> <style> .completed { text-decoration: line-through; } .something { color: red; } </style> <

  • vue-resourse将json数据输出实例

    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>

  • vue2.5.2使用http请求获取静态json数据的实例代码

    1.配置 build/webpack.dev.conf.js // 获取静态json数据 const express = require('express') const app = express() const apiServer = express() const bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyPar

  • vue新vue-cli3环境配置和模拟json数据的实例

    最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c

  • vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    vue.js实现数据库的JSON数据输出渲染到html页面功能示例

    本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能.分享给大家供大家参考,具体如下: 1.首先通过json.php把数据库给输出为json格式的数据 [ { "id":1, "resname":"百度", "resimg":"http://www.baidu.com/1.jpg", "resint":"2018-1-18", "re

  • 在Action中以Struts2的方式输出JSON数据的实例

    下面是整个Action的完整代码: package cn.ysh.studio.struts2.json.demo.action; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.Servlet

  • php正确输出json数据的实例讲解

    错误示例 $result = array('state'=>'123','message' =>'参数错误'); echo 'hello'; echo json_encode($result); 客户端先接收到第一个echo语句 但并不是json数据. 另外一种情况是执行了语句mysqli_close(),关闭了数据库导致不能接收到json数据,具体原因不详. 以上这篇php正确输出json数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • php写app接口并返回json数据的实例(分享)

    第一步:conn.PHP文件,用于连接数据库并定义接口格式,代码如下: <?php header("charset=utf-8"); $servername="localhost"; $username="root"; $password="root"; $dbname="test"; $conn = mysql_connect($servername,$username,$password); if

  • AJAX跨域请求JSONP获取JSON数据的实例代码

    Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该方法

  • 实现SQL Server 原生数据从XML生成JSON数据的实例代码

    实现SQL Server 原生数据从XML生成JSON数据的实例代码

    实现SQL Server 原生数据从XML生成JSON数据的实例代码 SQL Server 是关系数据库,查询结果通常都是数据集,但是在一些特殊需求下,我们需要XML数据,最近这些年,JSON作为WebAPI常用的交换数据格式,那么数据库如何生成JSON数据呢?今天就写了一个DEMO.        1.创建表及测试数据 SET NOCOUNT ON IF OBJECT_ID('STATS') IS NOT NULL DROP TABLE STATS IF OBJECT_ID('STATIONS

  • ajax跨域获取网站json数据的实例

    由于自己的公司的项目需要调用视频地址 1:当为链接时:直接在播放器用数据库查找的地址 2:当为外部链接时:直接用window.location.href('数据库查找的地址') 3:当为H5链接时:使用<ifram src="数据库查找的地址">播放 4:当为其余网站链接时,要去第三方网站读取json信息然后把json数据作为url放在播放器中 当为4时,我使用json时会出格式错误 当用jsonp解决跨域问题时,会出现返回格式接收不到 所以我用 public static

随机推荐