vue中json的用法一:import-编译时输出接口
items.json:
{
"data": [
{
"name": "数码",
"childrenItem": [
{
"name": "手机"
},
{
"name": "手表"
},
{
"name": "闹钟"
}
]
},
{
"name": "数码",
"childrenItem": [
{
"name": "手机"
},
{
"name": "手表"
},
{
"name": "闹钟"
}
]
}
]
}
vue文件引入:
<script>
import list from "./items.json"
export default {
name: "app",
data() {
return {
items: list.data
}
}
}
</script>
vue中json的用法二: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 testJson = require('./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);
// {
// "name": "tom",
// "age": 18
// }
}
vue中json的用法三:通过http请求获取
test.json文件
{
"testData": "hello world",
"testArray": [1,2,3,4,5,6],
"testObj": {
"name": "tom",
"age": 18
}
}
// http引用
methods:{
async jsonHttpTest(){
const res = await this.$http.get('http://localhost:8080/static/json/test.json');
// 放在src中的文件都会被webpack根据依赖编译,无法作为路径使用,static中的文件才可以作为路径用
// const res = await this.$http.get('http://localhost:8080/src/page/json/test.json');
const {testData, testArray, testObj} = res.data;
console.log('testHttpData',testData);
// ‘hello world’
console.log('testHttpArray',testArray);
// [1,2,3,4,5,6]
console.log('testHttpObj',testObj);
// {
// "name": "tom",
// "age": 18
// }
}
},
mounted() {
this.jsonHttpTest();
},
改写于:
作者:来碗鸡蛋面
链接:https://www.jianshu.com/p/6839ffe69338