vue 调取本地wps_详解VUE调用本地json的使用方法
开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况。
下面我说下我这的情况,大家依情况代入
当然vue你刚开始创建的话,你是要去配置下东西,下面我说的是你的项目能够跑起来的情况,完咯再去想办法去引用json,当然我这里用的也是axios的获取方法,如果不是这种方法的可以带过了
首先你要知道那你的json应该放在哪个文件夹下(普通引用)如果你想写的有自己的规范,可以按照你自己的方式来。在网上看见了几个放在不同文件夹下的,好像要去配置什么东西,我也没细看,但标准模式下最好放到你的static的文件夹下,来上图
如果没有放到这个文件夹下可能会报错哟!
json数据一定要写的规范
{
"status":"0",
"result":[
{
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"note.jpg"
},
{
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"1.jpg"
},
{
"productId":"10001",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10002",
"productName":"小米笔记本",
"prodcutPrice":"3999",
"prodcutImg":"note.jpg"
},
{
"productId":"10003",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"mi6.jpg"
},
{
"productId":"10004",
"productName":"小米6",
"prodcutPrice":"2499",
"prodcutImg":"1.jpg"
}
] }
json写好后就需要去引入了,想办法调用到这些数据咯由于是本地连接的地址一定要http://localhost:8080/static/ceshi.json这样的格式
import axios from 'axios'
export default{
data(){
return {
res:"",//创建对象
}
},
mounted () {
this.getGoodsList()
},
methods: {
getGoodsList () {
this.$axios.get('http://localhost:8080/static/ceshi.json').then((res) => {
//用axios的方法引入地址
this.res=res
//赋值
console.log(res)
})
}
}
}
:data="res.data.result"
border
style="width: 100%">
fixed
prop="productId"
label="日期"
width="150">
prop="productName"
label="岗位"
width="120">
prop="prodcutPrice"
label="手机号"
width="120">
prop="prodcutImg"
label="姓名"
width="120">
以上所述是小编给大家介绍的VUE调用本地json的使用方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
vue 调取本地wps_详解VUE调用本地json的使用方法相关推荐
- 实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
- python调用cmd命令释放端口_详解python调用cmd命令三种方法
目前我使用到的python中执行cmd的方式有三种 使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码, ...
- vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
- php接收vue请求数据axios,详解vue axios用post提交的数据格式
Content-type的几种常见类型 一.是什么? 是Http的实体首部字段,用于说明请求或返回的消息主体是用何种方式编码,在request header和response header里都存在. ...
- vue render 渲染html,详解vue渲染函数render的使用
1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如 ...
- render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
- vue数组刷新_详解VUE 数组更新
1.数据方法分类: (1)原数组改变 push pop unshift shift reverse sort splice (2)原数组未变,生成新数组 slice concat filter 对于使 ...
- python cmd命令大全-详解python调用cmd命令三种方法
目前我使用到的python中执行cmd的方式有三种 使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码, ...
- 详解python运行三种方式_详解python调用cmd命令三种方法
目前我使用到的python中执行cmd的方式有三种 使用os.system("cmd") 该方法在调用完shell脚本后,返回一个16位的二进制数,低位为杀死所调用脚本的信号号码, ...
最新文章
- jQuery插件总动员
- 结构(struct)
- 这周开发工作时间及内容、思考和阅读的内容
- 15行代码AC——习题3-3 数数字 (UVa1225,Digit Counting)
- PyCaret 2.0在这里-新增功能?
- Three.js制作360度全景图
- java在线网页客服聊天_管理员消息java 网站用户在线和客服聊天
- 如何去掉桌面图标上的小箭头
- 上传头像(照相机、图片库)
- 先码后看,程序员的「双节」该买点什么?
- BZOJ4565: [Haoi2016]字符合并
- python正则抓取身份证号码,验证18位身份证号码是否正确
- 设计模式六大原则详解
- c语言练习之路4之浙大版《C语言程序设计实验与习题指导(第3版)》题目集
- 2021年中国定制家具行业现状分析:“量身定制”需求逐年增加[图]
- 传中芯国际洽购华虹NEC 双方展开初步谈判
- Uglifyjs入门
- 使用ajaxSubmit上传文件总结
- Java io流实现文件分割
- HTML5常用四种盒模型标签介绍与区分
热门文章
- AI 击败了人类,设计了更好的经济机制
- 她是计算机系公认的系花 却只喜欢打游戏,我选择了计算机专业,自以为自己不是系花就是班花,结果扎心了...
- Invalid ROM Table解决办法
- c语言基本数据类型(short、int、long、char、float、double)
- 艾美捷11-脱氢血栓烷B2研究资料
- 《阿凡达:水之道》售票开启,9.9元抢980元电影卡!全国影院通用!
- 升级Xcode7发现的一些问题和解决方案
- Xcode7 制作通用的framework
- Android 系统 cpu0 目录查看 CPU 频率freq和策略policy
- 杭州法院受理人脸识别第一案!