1、数据格式

[
{
"title": "喵1",
"href": "1",
"url": "Images/1.jpg"
},
{
"title": "喵2",
"href": "2",
"url": "Images/2.jpg"
},
{
"title": "喵3",
"href": "3",
"url": "Images/3.jpg"
}
]

2、取值方法

getPic:function(){
// 也可以通过 params 对象传递参数
axios.get('Data/goPics.json', {
params: {
//ID: 12345
},
responseType: 'json', // default
})
.then(function (response) {
this.pic=response;
   alert(this.pic.data[0].url);//这里需要注意,json数据中并没有data这一层,是控件添加的,取得时候需要加上data
})
.catch(function (error) {
console.log(error);
});
}

axios的初步使用的更多相关文章

  1. 十. Axios网络请求封装

    1. 网络模块的选择 Vue中发送网络请求有非常多的方式,那么在开发中如何选择呢? 选择一:传统的Ajax是基于XMLHttpRequest(XHR) 为什么不用它呢?非常好解释配置和调用方式等非常混 ...

  2. 初步使用vue中axios

    1.下载axios npm install axios --save 2.两种方式使用axios (1)在模块中引入axios 例如:我在用户登陆界面需要使用axios,就在login页面引入,不是全 ...

  3. [Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门

    一.前言 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,能够非常便捷的发起 http 请求 ...

  4. axios 使用入门

    [Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门   一.前言# 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重 ...

  5. nuxt.js 封装axios

    1.安装axios cnpm install axios --save 2.在plugins文件夹下面创建service.js import axios from 'axios' import { M ...

  6. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  7. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  8. Android自定义View初步

    经过上一篇的介绍,大家对于自定义View一定有了一定的认识,接下来我们就以实现一个图片下显示文字的自定义View来练习一下.废话不多说,下面进入我们的正题,首先看一下我们的思路,1.我们需要通过在va ...

  9. 初步认识Node 之Node为何物

    很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了.    Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...

随机推荐

  1. 洛谷 P1464 Function【记忆化搜索】

    题目链接 题目描述 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回值1. 如果a>20 or b>20 or c>20就返回w ...

  2. UVa140 Bandwidth 【最优性剪枝】

    题目链接:https://vjudge.net/contest/210334#problem/F  转载于:https://www.cnblogs.com/luruiyuan/p/5847706.ht ...

  3. 【java并发核心一】Semaphore 的使用思路

    最近在看一本书<Java并发编程 核心方法与框架>,打算一边学习一边把学习的经验记下来,所粘贴的代码都是我运行过的,大家一起学习,欢迎吐槽. 估计也没多少人看我的博客,哈哈,那么我还是会记 ...

  4. Flask使用SQLAlchemy两种方式

    一.SQLAlchemy和Alembic 主要使用原生的SQLAlchemy进行数据库操作和使用Alemic进行数据库版本控制 I 创建数据库主要有三个步骤 创建表的父类/数据库连接/Session ...

  5. win7 资源资源管理器访问FTP站点

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\ftp] @="URL:File Transfer Protocol" ...

  6. python魔法方法-单目运算及一般算数运算

    在比较的魔法方法中,我们讨论了魔法方法其实就是重载了操作符,例如>.<.==等.而这里,我们继续讨论有关于数值的魔法方法. 1.单目运算符或单目运算函数 __pos__(self) 实现一 ...

  7. POJ.1160.Post Office(DP 四边形不等式)

    题目链接 \(Description\) 一条直线上有n个村庄,位置各不相同.选择p个村庄建邮局,求每个村庄到最近邮局的距离之和的最小值. \(Solution\) 先考虑在\([l,r]\)建一个邮 ...

  8. rabbitmq使用(四)

    In the previous tutorial we built a simple logging system. We were able to broadcast log messages to ...

  9. oracle中查找和删除重复记录的几种方法总结

    平时工作中可能会遇到当试图对库表中的某一列或几列创建唯一索引时,系统提示 ORA-01452 :不能创建唯一索引,发现重复记录. 下面总结一下几种查找和删除重复记录的方法(以表CZ为例): 表CZ的结 ...

  10. sql ,内连接,外连接,自然连接等各种连接

    1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 students和c ...