脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue获取json文件数据

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实现图片平铺方式

    在Vue中,实现图片或组件的平铺布局并允许用户进行修改,可以通过数据绑定、模板编写与交互设计来实现图片平铺,使用v-for指令和动态组件,可以创建可编辑的组件平铺布局,允许用户通过点击触发编辑操作,通过外部编辑面板修改属性后保存更改
    2024-10-10
  • 对vue中的input输入框进行邮箱验证方式

    对vue中的input输入框进行邮箱验证方式

    这篇文章主要介绍了对vue中的input输入框进行邮箱验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 23个不可错过的Vue3实用Hook

    23个不可错过的Vue3实用Hook

    @vueuse/core提供了丰富的功能性钩子,使得处理常见的开发任务变得更加简洁和高效,本文将详细介绍如何在Vue3项目中使用 @vueuse/core及其一些极具价值的功能,需要的可以参考下
    2024-11-11
  • Vue3中使用Pinia的方法详细介绍

    Vue3中使用Pinia的方法详细介绍

    这篇文章主要给大家介绍了关于Vue3中使用Pinia的相关资料,pinia是一个用于vue的状态管理库,类似于vuex,是vue的另一种状态管理工具,文中介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue使用axios实现动态追加数据

    vue使用axios实现动态追加数据

    在vuejs中使用axios时,有时候需要追加数据,比如,移动端下拉触底加载,分页加载,滑动滚动条等,下面小编就来为大家介绍一下如何使用使用axios实现动态追加数据吧
    2023-10-10
  • 不能通过IP地址访问VUE项目的问题及解决

    不能通过IP地址访问VUE项目的问题及解决

    这篇文章主要介绍了不能通过IP地址访问VUE项目的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue router的addRoute方法实现控制权限方法详解

    Vue router的addRoute方法实现控制权限方法详解

    这篇文章主要介绍了vue动态路由添加，vue-router的addRoute方法实现权限控制流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • Vue项目打包问题详解(生产环境样式失效)

    Vue项目打包问题详解(生产环境样式失效)

    在Vue开发过程中,项目的打包是一个非常重要的步骤,下面这篇文章主要给大家介绍了关于Vue项目打包问题(生产环境样式失效)的相关资料,文中介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 在Vue3和TypeScript中大文件分片上传的实现与优化

    在Vue3和TypeScript中大文件分片上传的实现与优化

    本文介绍在 Vue 3 和 TypeScript 环境下大文件分片上传的实现与优化,包括项目前后端技术栈,前端的文件切片、并发上传、计算 Hash、断点续传和用户体验优化,后端的文件接收存储、切片合并、异常处理与日志记录,还提及遇到的问题及解决方案,总结了此方式的优势和重要性
    2025-01-01
  • 解决vue语法会有延迟加载显现{{xxx}}的问题

    解决vue语法会有延迟加载显现{{xxx}}的问题

    今天小编就为大家分享一篇解决vue语法会有延迟加载显现{{xxx}}的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论