Vue中引入json的三种方式总结
更新时间：2023年05月17日 17:01:09 作者：青颜的天空
这篇文章主要介绍了Vue中引入json的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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();
},vue解析json数据
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><!--vue.min.js的库-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!--jQuery库-->
</head>
<body>
<div id="main">
<div v-for="item in rows">
<p>姓名:{{item.name}}</p>
<p>昵称:{{item.nick}}</p>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$.getJSON("data.json", function (result, status) {
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>test.json
[
{
"name": "王小婷",
"nick": "祈澈菇凉"
}, {
"name": "安安",
"nick": "坏兔子"
}, {
"name": "编程微刊",
"nick": "简书"
}
]总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-01-01
这篇文章主要给大家介绍了关于vue2.0+elementui实现一个上门取件时间组件的相关资料,用于预约上门服务时间 看到网上有很多乱七八糟的代码,看着头疼,于是自己写了一个简单的,需要的朋友可以参考下2024-02-02
mixins（混入）是一种分发 Vue 组件中可复用功能的非常灵活的方式，这篇文章主要为大家介绍了mixins混入的介绍和使用，需要的可以参考下2023-08-08
这篇文章主要介绍了vue引用echarts饼图不显示图例的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
本篇文章主要介绍了Vue中render函数的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
vue3 Error:Unknown variable dynamic import: ../views/的解
这篇文章主要给大家介绍了关于vue3 Error:Unknown variable dynamic import: ../views/的解决方案,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
vue cli 3.x 项目部署到 github pages的方法
这篇文章主要介绍了vue cli 3.x 项目部署到 github pages的方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素，也就是说teleport 中的内容允许我们控制在任意的DOM中，使用简单，对VUE 3 teleport传送门相关知识感兴趣的朋友一起看看吧2021-10-10
最近用 Vue 做移动端页面遇到一个问题,需要记住滚动条的位置,所以下面这篇文章主要给大家介绍了关于vue中记录滚动条位置的两种方法,文中给出了详细的实例,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue父子组件slot插槽的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论