vue-resourse将json数据输出实例

2024-10-24 16:32:24

本文主要讲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学习笔记:如何加载本地json文件

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

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

vue-resourse将json数据输出实例

相关推荐

随机推荐