您现在的位置是:网站首页> 编程资料编程资料
Vue中如何获取json文件中的数据_vue.js_
2023-05-24
330人已围观
简介 Vue中如何获取json文件中的数据_vue.js_
场景
访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中,
现在在组件listcate.vue需要获取json数据。
json文件内容:

文件位置:

实现
musictype.json
{ "currentType":[1,2,11,21,22,23,24,25] }listcate.vue
注:
是通过import MusicType from "../assets/data/musictype.json" 引入的
然后通过 this.musicTypeJSON = MusicType.currentType 赋值给musicTypeJSON,然后通过
循环遍历取值。
然后再ListCast_List.vue中直接通过:
props:{ musicType:{ type:[String,Number], default:1 } }, mounted(){ const ListCateUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.musicType +"&size=3&offset=0" this.$axios.get(ListCateUrl) .then(res => { console.log(res.data) this.listCateData = res.data }) .catch(error => { console.log(error); }) } }获取并使用。
到此这篇关于Vue中如何获取json文件中的数据的文章就介绍到这了,更多相关vue获取json文件数据内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- vue引用json文件的方法小结_vue.js_
- node-sass@4.14.1报错的最终解决方案分享_node.js_
- 使用vue-cli初始化项目时运行‘npm run dev’报错及解决_vue.js_
- vue如何在style标签中使用变量(数据)详解_vue.js_
- js基于div丝滑实现贝塞尔曲线_JavaScript_
- 多个vue项目复用一个node_modules的问题_vue.js_
- el-date-picker日期选择限制范围的实例代码_vue.js_
- Vue.js element-plus使用图标不显示问题的解决方式_vue.js_
- vue3.2自定义弹窗组件结合函数式调用示例详解_vue.js_
- 关于应用UI组件的移动端适配方式_vue.js_
