Vue中如何獲取json文件中的數(shù)據(jù)
場景
訪問百度音樂API需要傳遞音樂類型參數(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>
注:
是通過import MusicType from "../assets/data/musictype.json" 引入的
然后通過 this.musicTypeJSON = MusicType.currentType 賦值給musicTypeJSON,然后通過
<ListCate_List v-for="item in musicTypeJSON" :musicType="item" />
循環(huán)遍歷取值。
然后再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); }) } }
獲取并使用。
到此這篇關(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è)簡易的可以復(fù)制的表格,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-12-12關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語法和es6語法,非常具有實(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-12vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過程
vue-cli 默認(rèn)只提供了 dev 和 prod 兩種環(huán)境。這篇文章主要介紹了vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過程,需要的朋友可以參考下2018-10-10Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖,引入組件設(shè)置寬高100%,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05