vue引用json文件
懒啦 人气:0相信大家都有被后端数据支配过 废话不多说 直接上代码
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引用时,放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引用时,放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'); // 放在src中的文件都会被webpack根据依赖编译,无法作为路径使用,static中的文件才可以作为路径用 const {testData, testArray, testObj} = res.data; } }, mounted() { this.jsonHttpTest(); },
加载全部内容