Vue中如何獲取json文件中的數(shù)據(jù)
場(chǎng)景
訪問(wèn)百度音樂(lè)API需要傳遞音樂(lè)類型參數(shù),而這些參數(shù)是存在musictype.json中,
現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)。
json文件內(nèi)容:

文件位置:

實(shí)現(xiàn)
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>注:
是通過(guò)import MusicType from "../assets/data/musictype.json" 引入的
然后通過(guò) this.musicTypeJSON = MusicType.currentType 賦值給musicTypeJSON,然后通過(guò)
<ListCate_List v-for="item in musicTypeJSON" :musicType="item" />
循環(huán)遍歷取值。
然后再ListCast_List.vue中直接通過(guò):
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);
})
}
}獲取并使用。
到此這篇關(guān)于Vue中如何獲取json文件中的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue獲取json文件數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
利用Vue3實(shí)現(xiàn)可復(fù)制表格的方法詳解
表格是前端非常常用的一個(gè)控件,本文主要為大家介紹了Vue3如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的可以復(fù)制的表格,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-12-12
關(guān)于element-ui?select?下拉框位置錯(cuò)亂問(wèn)題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問(wèn)題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
詳解Webstorm 新建.vue文件支持高亮vue語(yǔ)法和es6語(yǔ)法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語(yǔ)法和es6語(yǔ)法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10
在vue中實(shí)現(xiàn)PDF文件流預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹如何在vue中實(shí)現(xiàn)PDF文件流預(yù)覽功能,文中的實(shí)現(xiàn)步驟講解詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的可以參考一下2023-12-12
vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過(guò)程
vue-cli 默認(rèn)只提供了 dev 和 prod 兩種環(huán)境。這篇文章主要介紹了vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過(guò)程,需要的朋友可以參考下2018-10-10
Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖,引入組件設(shè)置寬高100%,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05

