vue引用json文件的方法小结
短信预约 -IT技能 免费直播动态提醒
相信大家都有被后端数据支配过 废话不多说 直接上代码
1.解决怎么从控制台把数据 移到json文件中 直接右击复制值
var getData = require("./taifeng.json"); // 直接引入json文件
console.log(getData);vue中引用Json文件
我们用import引用文件的时候，被引用的文件都会用export暴漏，比如js，而有一些文件不需要暴漏，如Json、img（图片）、css;
import 引用Json文件
import aaaa from "./a.json"
//aaaa是变量，可以随便命名完成！ 没想到吧 就是这么简单 我在网上搜到的都是使用axios来进行转换 那个对于我这个脑袋不太好使的人属实不友好 所以还是这个简单高效 完美！
Vue 中引入 json 的三种方法
json的定义：
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
1.require-运行时加载
test.json文件
{
"testData": "hello world",
"testArray": [1,2,3,4,5,6],
"testObj": {
"name": "tom",
"age": 18
}
}// require引用：
mounted() {
// require引用时，放class="lazy" data-src和放statci都可以，建议放static
const testJson = require('../../static/json/test.json');
const {testData, testArray, testObj} = testJson;
console.log('testData',testData);
// ‘hello world'
console.log('testArray',testArray);
// [1,2,3,4,5,6]
console.log('testObj',testObj);
}2.import-编译时输出接口
// import 引用
// import引用时，放class="lazy" data-src和放statci都可以，建议放static
import testImportJson from '../../static/json/test.json'
// import testImportJson from './json/test.json'
export default {
data(){
return{
testImportJson
}
},
mounted() {
const {testData, testArray, testObj} = this.testImportJson;
}
}3. 通过http请求获取
// http引用
methods:{
async jsonHttpTest(){
const res = await this.$http.get('http://localhost:8080/static/json/test.json');
// 放在class="lazy" data-src中的文件都会被webpack根据依赖编译，无法作为路径使用，static中的文件才可以作为路径用
const {testData, testArray, testObj} = res.data;
}
},
mounted() {
this.jsonHttpTest();
},参考链接：https://www.jianshu.com/p/6839ffe69338
到此这篇关于vue引用json文件的文章就介绍到这了,更多相关vue引用json文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
