返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中如何获取json文件中的数据
  • 413
分享到

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

2024-04-02 19:04:59 413人浏览 安东尼
摘要

目录场景实现场景 访问百度音乐api需要传递音乐类型参数,而这些参数是存在musictype.JSON中, 现在在组件listcate.Vue需要获取json数据。 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文件数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue中如何获取json文件中的数据

本文链接: https://lsjlt.com/news/168056.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue中如何获取json文件中的数据
    目录场景实现场景 访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据。 json文件内容...
    99+
    2024-04-02
  • 如何从json文件中读取数据
    你可以使用Python的`json`模块来读取JSON文件。下面是一个简单的示例代码:```pythonimport json# 打...
    99+
    2023-09-13
    json
  • Java获取Json中的数据
    目录 1.普通元素 2.属性包含大括号 {  3.属性包含中括号 [ 4.属性中既有中括号包括,又嵌套了大括号 使用com.alibaba.fastjson解析 总结:一个花括号 { 放进JSONObject一次           ...
    99+
    2023-09-06
    json java
  • 如何使用Java获取Json中的数据
    这篇文章主要介绍“如何使用Java获取Json中的数据”,在日常操作中,相信很多人在如何使用Java获取Json中的数据问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用Java获取Json中的数据”的疑...
    99+
    2023-07-06
  • 获取request中json数据
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、...
    99+
    2016-03-08
    java教程 request java
  • python-获取URL中的json数据
    数据源为某系统提供的URL,打开是json文件,python代码获取如下: URL替换成自己的即可。 import urllib.request def get_record(url): resp = urllib.r...
    99+
    2023-01-31
    数据 python URL
  • java 获取request中json数据
    功能简介:         Java 从 HttpServletRequest 中获取前端传输过来的json数据 效果展示: 请求示例: post: 127.0.0.1:8081/getRequestJson {"messageHisto...
    99+
    2023-09-15
    java json servlet
  • Android应用中如何解析获取的json数据
    这篇文章将为大家详细讲解有关Android应用中如何解析获取的json数据,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。根据指定的URL从google 服务器上获得包含地址的json格式的数...
    99+
    2023-05-31
    android roi json
  • request如何获取body的json数据
    在request中可以获取到来自Http请求的body数据 比如获取json格式数据 代码: import com.alibaba.dubbo.common.utils.IOU...
    99+
    2024-04-02
  • 如何使用 cURL 在 PHP 中获取 JSON 数据和解码 JSON 数据
    在本文中,我们将介绍在 PHP 中使用 cURL 获取 JSON 数据和解码 JSON 数据的方法。 使用 cURL 函数 在 PHP 中使用 cURL 函数获取 JSON 数据并解码...
    99+
    2024-02-27
  • 如何获取json数组里的数据
    要获取JSON数组中的数据,可以使用不同的方法,具体取决于您使用的编程语言和框架。以下是使用一些常见编程语言和框架的示例:在Java...
    99+
    2023-08-15
    json
  • PHP中json数据怎么获取
    在PHP中,可以使用`json_decode()`函数将JSON数据转换为PHP对象或数组。以下是使用json_decode()函数...
    99+
    2023-09-25
    PHP json
  • js如何读取json文件片段中的数据实例
    这篇文章主要为大家展示了“js如何读取json文件片段中的数据实例”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何读取json文件片段中的数据实例”这篇文...
    99+
    2024-04-02
  • JSON数组和JSON对象在vue中的获取方法
    这两天在学习vue,主要是为了实现前后端的分离,因此数据的传输是必不可少的一个环节。 为了快速入门,参考了vue官网的视频,这个过程由于引入vue.js的问题走了一些弯路,这个我们以...
    99+
    2024-04-02
  • js中如何获取JSON数组的长度
    目录js获取JSON数组的长度js获取json的长度,不需要循环总结js获取JSON数组的长度 假设现在有一个json的数组: var json={a:1,b:2,c:3,d:4};...
    99+
    2023-05-16
    js获取JSON数组长度 js JSON数组长度 获取JSON数组长度
  • gitee中如何获取文件
    Gitee是中国最大的基于Git的开源社区,它为开发者提供了一个完备、稳定、易用的文档管理与协作平台。在Gitee上,我们可以很方便地托管我们的所有代码和文件,并且我们还可以方便地分享我们的代码和文件。在Gitee上,我们有时候需要获取某些...
    99+
    2023-10-22
  • Vue怎么通过json文件读取数据
    本篇内容介绍了“Vue怎么通过json文件读取数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.准备工作1.1 webpack.dev....
    99+
    2023-07-04
  • 在nodeJs中如何修改json文件中的数据
    目录nodeJs修改json文件中的数据node.js批量处理json文件心理活动实操nodeJs修改json文件中的数据 // 注意,在内部读取文件不能访问 json 文件中的属性...
    99+
    2022-11-13
    nodeJs修改json数据 json文件数据修改 nodeJs json文件数据
  • 【Flutter】在 Flutter 中如何获取本地的 json 文件并解码
    文章目录 一、 前言二、 如何在 Flutter 中获取本地 JSON 文件1. 创建本地 JSON 文件2. 在 Flutter 中读取本地 JSON 文件 三、 如何在 Flutte...
    99+
    2023-09-07
    flutter json android ios 原力计划
  • ajax中如何读取Json数据
    这篇文章将为大家详细讲解有关ajax中如何读取Json数据,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、基础知识什么是json?JSON 指的是 Jav...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作