Vue中如何获取json文件中的数据

更新时间：2022年09月21日 10:06:55 作者：霸道流氓气质

访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，现在在组件listcate.vue需要获取json数据，如何实现呢，下面小编给大家带来了Vue中如何获取json文件中的数据，感兴趣的朋友一起看看吧

场景

访问百度音乐API需要传递音乐类型参数，而这些参数是存在musictype.json中，

现在在组件listcate.vue需要获取json数据。

json文件内容：

文件位置：

实现

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" />

循环遍历取值。

然后再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文件中的数据的文章就介绍到这了,更多相关vue获取json文件数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue循环数组改变点击文字的颜色
这篇文章主要为大家详细介绍了vue循环数组改变点击文字的颜色，非常实用的切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
如何在Vue单页面中进行业务数据的上报
为什么要在标题里加上一个业务数据的上报呢，因为在咱们前端项目中，可上报的数据维度太多，比如还有性能数据、页面错误数据、console捕获等。这里我们只讲解业务数据的埋点。
2021-05-05
vue+drf+第三方滑动验证码接入的实现
这篇文章要给大家介绍的是vue和drf以及第三方滑动验证码接入的实现，下文小编讲详细讲解该内容，感兴趣的小伙伴可以和小编一起来学习奥
2021-10-10
如何基于Vue制作一个猜拳小游戏
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式,下面这篇文章主要给大家介绍了关于如何基于Vue制作一个猜拳小游戏的相关资料,需要的朋友可以参考下
2023-01-01
Vue.js绑定HTML class数组语法错误的原因分析
Vue.js绑定HTML class数组语法错误有哪些原因导致的呢，该如何解决呢？下面小编给大家分享Vue.js绑定HTML class数组语法错误的原因分析，感兴趣的朋友一起看看吧
2016-10-10
Vue.js render方法使用详解
这篇文章主要为大家详细介绍了Vue.js render方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
vue-pdf插件实现pdf文档预览方式(自动分页预览)
这篇文章主要介绍了vue-pdf插件实现pdf文档预览方式(自动分页预览)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue冷门技巧递归组件实践示例详解
这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
一键将Word文档转成Vue组件mammoth的应用详解
这篇文章主要为大家介绍了一键将Word文档转成Vue组件mammoth的应用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
element el-select下拉框选择失效解决办法
el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下
2023-08-08