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-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09vue中进入详情页记住滚动位置的方法(keep-alive)
今天小编就为大家分享一篇vue中进入详情页记住滚动位置的方法(keep-alive),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07vue mounted()函数中无法定义初始化样式的原因分析
这篇文章主要介绍了vue mounted()函数中无法定义初始化样式的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03vue3使用Pinia修改state的三种方法(直接修改,$patch,actions)
Vue3 Pinia是一个状态管理库,专门为Vue3设计优化,它提供了一种简单而强大的方式来管理应用程序的状态,并且与Vue3的响应式系统紧密集成,本文给大家介绍了vue3使用Pinia修改state的三种方法,需要的朋友可以参考下2024-03-03
最新评论