場景

訪問百度音樂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文件中的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。