场景

访问百度音乐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文件中的数据相关推荐

获取json文件中的URL
1.实例代码为实现获取json文件中的图像: # -*- coding:utf-8 -*- import requests import re import osdef get_page_url(ur ...
使用jquery中的getJSON函数获取json文件中的内容并输出到页面上和使用 AJAX处理JSON文件
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
JavaScript中获取JSON文件中的数据
1.使用 Ajax 方式获取 $.get("json/test.json", function(data) { console.log(data.total); }); 1 2 3 ...
php json 转 xml格式,PHP中如何将JSON文件转XML格式
首先获取JSON文件中的字符:$content = file_get_contents('./data.json'); 然后使用函数"json_decode()"函数将字符串转为数 ...
解决从json文件中获取不到数据的问题
解决从json文件中获取不到数据的问题参考文章: (1)解决从json文件中获取不到数据的问题 (2)https://www.cnblogs.com/yhyanjin/p/7214776.html ...
React中使用axios来获取json文件
在项目开发中,可能需要读取本地json文件,需要将json文件放到public文件夹下才能获取到,在src中是获取不到的. 形如我在src下的某个模块下,使用axios获取json文件或者其他log文 ...
node.js 中的package.json文件怎么创建？
最近在用webstorm和nodejs做一些东西,老是各种混乱,今天上午创建一个新的项目,结果发现,npm init之后,并没有出现package.json,并没有太明确他的功能的小姑娘表示十分的惊慌 ...
NET问答: 如何在 ASP.NET Core 的 .json 文件中读取 AppSettings ?
咨询区 Oluwafemi: 在 appsettings.json 中我有如下的 AppSettings 实体数据,如下代码所示: {"AppSettings": {"t ...
C# 读取根目录的json文件中的某个值
/// <summary>/// 读取JSON文件/// </summary>/// <param name="key">JSON文件中的key ...

Vue中怎样获取json文件中的数据

场景

实现

musictype.json

listcate.vue

Vue中怎样获取json文件中的数据相关推荐

最新文章

热门文章