首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue引入json的方式

Vue中引入json的三种方式总结

2023-05-17 17:01:10 作者：青颜的天空

这篇文章主要介绍了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": "简书"
	}
]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。