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)文章
在Vue中,實(shí)現(xiàn)圖片或組件的平鋪布局并允許用戶進(jìn)行修改,可以通過(guò)數(shù)據(jù)綁定、模板編寫與交互設(shè)計(jì)來(lái)實(shí)現(xiàn)圖片平鋪,使用v-for指令和動(dòng)態(tài)組件,可以創(chuàng)建可編輯的組件平鋪布局,允許用戶通過(guò)點(diǎn)擊觸發(fā)編輯操作,通過(guò)外部編輯面板修改屬性后保存更改2024-10-10
對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式
這篇文章主要介紹了對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
23個(gè)不可錯(cuò)過(guò)的Vue3實(shí)用Hook
@vueuse/core提供了豐富的功能性鉤子,使得處理常見的開發(fā)任務(wù)變得更加簡(jiǎn)潔和高效,本文將詳細(xì)介紹如何在Vue3項(xiàng)目中使用?@vueuse/core及其一些極具價(jià)值的功能,需要的可以參考下2024-11-11
這篇文章主要給大家介紹了關(guān)于Vue3中使用Pinia的相關(guān)資料,pinia是一個(gè)用于vue的狀態(tài)管理庫(kù),類似于vuex,是vue的另一種狀態(tài)管理工具,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動(dòng)端下拉觸底加載,分頁(yè)加載,滑動(dòng)滾動(dòng)條等,下面小編就來(lái)為大家介紹一下如何使用使用axios實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)吧2023-10-10
不能通過(guò)IP地址訪問(wèn)VUE項(xiàng)目的問(wèn)題及解決
這篇文章主要介紹了不能通過(guò)IP地址訪問(wèn)VUE項(xiàng)目的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
Vue項(xiàng)目打包問(wèn)題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過(guò)程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問(wèn)題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
在Vue3和TypeScript中大文件分片上傳的實(shí)現(xiàn)與優(yōu)化
本文介紹在 Vue 3 和 TypeScript 環(huán)境下大文件分片上傳的實(shí)現(xiàn)與優(yōu)化,包括項(xiàng)目前后端技術(shù)棧,前端的文件切片、并發(fā)上傳、計(jì)算 Hash、斷點(diǎn)續(xù)傳和用戶體驗(yàn)優(yōu)化,后端的文件接收存儲(chǔ)、切片合并、異常處理與日志記錄,還提及遇到的問(wèn)題及解決方案,總結(jié)了此方式的優(yōu)勢(shì)和重要性2025-01-01
解決vue語(yǔ)法會(huì)有延遲加載顯現(xiàn){{xxx}}的問(wèn)題
今天小編就為大家分享一篇解決vue語(yǔ)法會(huì)有延遲加載顯現(xiàn){{xxx}}的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11