位置: IT常识 - 正文

uni-app读取本地json数据文件,并渲染到页面上。(uniapp获取当前url)

编辑:rootadmin
uni-app读取本地json数据文件,并渲染到页面上。 前言

推荐整理分享uni-app读取本地json数据文件,并渲染到页面上。(uniapp获取当前url),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp读取文件,uniapp获取数据,uniapp加载本地html,uniapp获取当前url,uniapp读取本地json数据,uniapp读取本地文件,uniapp读取本地json数据,uniapp读取本地json数据,内容如对您有帮助,希望把文章链接给更多的朋友!

uni-app读取本地json数据文件,有下面两种方式可以实现:

文件后缀为.json类型文件后缀为.js类型具体演示代码

1、文件后缀为.json类型

非H5端,这种类型的文件,目前只能使用require进行导入,导入后为一个对象类型。import无法导入json文件。

① 在项目根目录下,新建一个目录data。

② 在data目录下,新建一个cityData.json文件,写上本地模拟json数据,注意文件后缀为json。

// cityData.json// 必须是""格式,否则报错[ {"id":"1","city":"深圳"}, {"id":"2","city":"广州"}]

③ 在index.vue页面引入并使用。

<template> <view v-for="item in localData"> <text>{{item.name}}</text> </view></template><script> const cityData = require('@/data/cityData.json') export default { data() { return { localData: cityData } }, onLoad() { console.log('cityJson:'+JSON.stringify(cityData)); //=>cityJson:[{id:'',city:''},{id:'',city:''}] } }</script>uni-app读取本地json数据文件,并渲染到页面上。(uniapp获取当前url)

H5端,可以引入jq,使用jq的AJAX读取本地的json文件。

$.getJSON('../../data/cityData.json').then((res)=>{ console.log('cityJson:'+JSON.stringify(res));});//=>cityJson:[{id:'',city:''},{id:'',city:''}]

2、文件后缀为.js类型

在js文件中写入json数据,使用export导出。在需要的页面中用import方式进行导入,import无法导入json文件。实现如下:

① 在项目根目录下,新建一个目录data。

② 在data目录下,新建一个data.js文件,注意文件后缀为js。

③ 在data.js页面中写上本地模拟json数据,并导出。

④ 在index.vue页面引入并使用。

方式1

// data.jsconst cityData = [ {id:'1',city:'深圳'}, {id:'2',city:'广州'},]module.exports = { cityData: cityData}// index.vue<template> <view v-for="item in localData"> <text>{{item.city}}</text> </view></template><script> import data from "@/data/data.js" export default { data() { return { localData: data.cityData } }, }</script>

方式二(推荐)

// data.jsconst cityData = [ {id:'1',city:'深圳'}, {id:'2',city:'广州'},]function refresh(){ return ''}export { cityData, refresh}// index.vue<template> <view v-for="item in localData"> <text>{{item.city}}</text> </view></template><script> import {cityData, refresh} from "@/data/data.js" export default { data() { return { localData: cityData } }, onLoad() { console.log(refresh()) console.log(JSON.stringify(cityData)) }, }</script>注意事项

uni.request()是无法读取本地的js文件和json文件的,jq是能读取的,但是jq只能在H5端引入使用。

本文链接地址:https://www.jiuchutong.com/zhishi/289629.html 转载请保留说明!

上一篇:annaconda 安装 opencv(cv2)(annaconda安装opencv)

下一篇:黑沙滩上Reynisdrangar的玄武岩,冰岛 (© Cavan Images/Getty Images)(黑沙滩是什么意思)

  • 海关完税价格计算公式
  • 一般纳税人税费计算明细表
  • 个纳税人申报
  • 固定资产盘点折旧怎么算
  • 家庭保洁服务价格表
  • 免交附加税政策
  • 个人所得税纳税比例
  • 差额征税劳务费发票
  • 其他权益工具投资是什么类科目
  • 房地产开发企业预缴增值税
  • 土地转让合同也叫什么
  • 转出未交增值税和转出多交增值税
  • 可以抵扣的凭证
  • 主营业务收入借增贷减
  • 装修费用如何摊销成本
  • 预付账款余额怎么算
  • 建筑业预缴税款都要填哪些表
  • 公司团建活动奖状模板
  • 企业对外投资需要注意的事项
  • 普票和专票的税率分别是多少
  • 信息服务业税收优惠政策
  • 外贸企业运输费用占总成本比例
  • 未实现但已确认的风险代理费收入如何处理?
  • 增值税一般项目是指什么
  • 中介收中介费后就不管了
  • 购进虚假发票进项税转出的会计处理?
  • 其他应付款不用付了会计分录
  • json去除某个字段
  • 买股指期货有什么条件
  • 支付征地补偿款计入什么科目
  • 固定资产清查盘盈盘亏的账务处理
  • php cli 多线程
  • 前端大佬都有谁
  • 进项抵销项的会计分录
  • 企业支付股利属于由( )引起的财务活
  • 劳务报酬需要申报个税吗
  • 劳务公司已开票怎么入账
  • 短期贷款利息支付
  • 外购商品发放给员工 进项税额能不能抵扣
  • 所得税季报中的营业收入包括营业外收入吗
  • 跨月的增值税普通发票能作废吗
  • 进口卷烟消费税定额税率
  • 材料报废如何做分录
  • 员工社保报销流程
  • 购买货物运输费计入什么科目
  • 网上购物退货后钱多久到
  • 现金流量表的编制基础是权责发生制
  • 换工作后个税app单位会自动更改吗
  • 专票和普票的区别税点差多少
  • 实际成本大于预计总成本
  • MySQL slave_net_timeout参数解决的一个集群问题案例
  • mysql 5.7.11 winx64快速安装配置教程
  • mysql5.7免安装版
  • sql语句大全实例教程
  • mysql服务无效
  • vi修改文件
  • server2008 无法启动
  • linux系统转换为win系统脚本
  • 在mac中运行exe
  • msqry32.exe进程是什么文件 作用是什么 msqry32进程查询
  • linux服务器日志文件在哪里
  • win7软件界面显示不全怎么办
  • ssh客户端软件
  • win7打开文件提示用户没有访问权限怎么办
  • web jquery
  • shell脚本语句
  • c#中thread的用法
  • shell脚本clear
  • javascript怎么弄
  • javascript 性能
  • javascript入门教程
  • JavaScript Try...Catch 声明的 使用方法
  • 详解各种汽油一吨等于多少升
  • js获取鼠标点击位置
  • 南京税务局是地市级还是副省级
  • 代扣代缴申报表 填表说明
  • 国税地税发票编码查询
  • 四川省国家电子税务局网上申报
  • 新疆自治区国税局郑志全
  • 长沙税务服务热线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设