场景

访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，

现在在组件listcate.vue需要获取json数据。

json文件内容：

文件位置：

实现

musictype.json

{"currentType":[1,2,11,21,22,23,24,25] }

listcate.vue

<template lang="html"><div><ListCate_List v-for="item in musicTypeJSON" :musicType="item" /></div> </template><script>import MusicType from "../assets/data/musictype.json" import ListCate_List from "../components/ListCate_List"export default {data(){return{musicTypeJSON:[]}},components:{ListCate_List},created(){this.musicTypeJSON = MusicType.currentType} } </script><style lang="css"> </style>

注：

是通过import MusicType from "../assets/data/musictype.json"  引入的

然后通过  this.musicTypeJSON = MusicType.currentType 赋值给musicTypeJSON，然后通过

  <ListCate_List v-for="item in musicTypeJSON" :musicType="item" />

循环遍历取值。

然后再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文件中的数据的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。