Vue中如何獲取json文件中的數(shù)據(jù)

更新時間：2022年09月21日 10:06:55 作者：霸道流氓氣質

訪問百度音樂API需要傳遞音樂類型參數(shù)，而這些參數(shù)是存在musictype.json中，現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)，如何實現(xiàn)呢，下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù)，感興趣的朋友一起看看吧

場景

訪問百度音樂API需要傳遞音樂類型參數(shù)，而這些參數(shù)是存在musictype.json中，

現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù)。

json文件內容：

文件位置：

實現(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);
      })
  }
}

獲取并使用。

到此這篇關于Vue中如何獲取json文件中的數(shù)據(jù)的文章就介紹到這了,更多相關vue獲取json文件數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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