欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論