位置: 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)(黑沙滩是什么意思)

  • 小米air2se蓝牙耳机怎么开机(小米air2se蓝牙耳机怎么连接)

    小米air2se蓝牙耳机怎么开机(小米air2se蓝牙耳机怎么连接)

  • 微信朋友分类在哪里设置(微信朋友分类怎么分组)

    微信朋友分类在哪里设置(微信朋友分类怎么分组)

  • 苹果xs屏幕失灵(苹果xs屏幕失灵事件怎么解决)

    苹果xs屏幕失灵(苹果xs屏幕失灵事件怎么解决)

  • oppo手机加入白名单怎么解除(oppo手机如何加入白名单)

    oppo手机加入白名单怎么解除(oppo手机如何加入白名单)

  • 淘宝补差价链接怎么弄呢?(淘宝补差价链接什么意思)

    淘宝补差价链接怎么弄呢?(淘宝补差价链接什么意思)

  • 淘宝代销和分销的区别(在淘宝分销跟代发是一样的吗)

    淘宝代销和分销的区别(在淘宝分销跟代发是一样的吗)

  • 数据和程序是以什么形式储存在磁盘上的(数据和程序有区别吗?如何确定哪些是数据,哪些是程序?)

    数据和程序是以什么形式储存在磁盘上的(数据和程序有区别吗?如何确定哪些是数据,哪些是程序?)

  • iphone11深色模式有什么用(iphone11深色模式和浅色模式哪个省电)

    iphone11深色模式有什么用(iphone11深色模式和浅色模式哪个省电)

  • wps个人版同步几台设备

    wps个人版同步几台设备

  • 微信置顶语句怎么设置(微信置顶话语)

    微信置顶语句怎么设置(微信置顶话语)

  • 京东待收货怎么取消(京东待收货怎么退款)

    京东待收货怎么取消(京东待收货怎么退款)

  • 抖音怎么上传视频30秒(抖音怎么上传视频)

    抖音怎么上传视频30秒(抖音怎么上传视频)

  • 麒麟810有哪些手机(麒麟810的手机有什么)

    麒麟810有哪些手机(麒麟810的手机有什么)

  • 荣耀手环4怎么更换表盘(荣耀手环4怎么充电)

    荣耀手环4怎么更换表盘(荣耀手环4怎么充电)

  • 地图位置定位怎么设置自己的店名(地图位置定位怎么把原来的改掉)

    地图位置定位怎么设置自己的店名(地图位置定位怎么把原来的改掉)

  • 小爱音箱怎么连接qq音乐(小爱音箱怎么连接)

    小爱音箱怎么连接qq音乐(小爱音箱怎么连接)

  • 拼多多怎么获得幸运码(拼多多怎么获得优惠券)

    拼多多怎么获得幸运码(拼多多怎么获得优惠券)

  • 出国旅游手机流量怎么办(出国旅行手机还能用吗)

    出国旅游手机流量怎么办(出国旅行手机还能用吗)

  • 仅限紧急呼叫是什么意思(仅限紧急呼叫是怎么回事)

    仅限紧急呼叫是什么意思(仅限紧急呼叫是怎么回事)

  • 手机怎么和电视多屏互动(手机怎么和电视传输文件)

    手机怎么和电视多屏互动(手机怎么和电视传输文件)

  • 如何重装系统win10?(如何重装系统win7旗舰版)

    如何重装系统win10?(如何重装系统win7旗舰版)

  • 迷迭香的养殖方法(图文)(迷迭香的养殖方法)

    迷迭香的养殖方法(图文)(迷迭香的养殖方法)

  • 刷题日常计~JS③(刷题有什么作用)

    刷题日常计~JS③(刷题有什么作用)

  • java桥接模式是什么(java桥接模式的应用场景)

    java桥接模式是什么(java桥接模式的应用场景)

  • 房地产增值税税率是多少
  • 一般纳税人结转增值税
  • 预缴企业所得税计税依据
  • 新准则金融资产科目名称
  • 个人财产租赁所得税计算
  • 报税显示税款入账未到账
  • 一般纳税人印花税税率是多少
  • 附加税退税申请表的填
  • 产品成本核算时做好哪些基础工作
  • 仪器检测费发票哪一类
  • 固定资产认证进项在勾选平台勾吗
  • 收到施工方给红包怎样处理
  • 股权转让印花税税目怎么填
  • 票面利率大于市场利率是溢价吗
  • 12月份费用可以计提吗
  • 对方承担税点的发票额怎么计算
  • 违反劳动合同的责任
  • 房地产企业汇算清缴报表
  • 开具红字发票无蓝字发票如何网上申报?
  • 如何能减免个人所得税
  • 金税盘上报汇总是什么时候
  • 哪些情形可以补胎
  • 加盟费怎么算的
  • 房产企业可计入开发成本的利息如何确定?
  • 申报表利润总额与财务报表利润总额
  • 银行票据abs付款的几种方式
  • 咨询费如何缴纳个税
  • 超市开具预付卡发票不征税发票上税吗
  • 未分配利润亏损怎么做分录
  • 未开票收入申报后又要开票
  • PHP:mb_convert_encoding()的用法_mbstring函数
  • 赔偿款财务如何做账
  • php开发过程遇到的难题
  • 采用汇兑的方式归还前欠货款
  • 基本户可以公对私吗
  • php自动提交表单
  • ntpd命令详解
  • 文化事业建设费税收优惠2023
  • 免征企业所得税的有哪些行业
  • 增值税发票可以重开吗
  • mongo删除数据库命令
  • 有限公司也可以向股东核发股票
  • 稽查查补的税款由谁追征
  • 印刷行业成本核算程序
  • 处置子公司如何纳税
  • 基本户变更经营范围需要什么材料
  • 土地出让金抵减增值税申报怎么填
  • 计提坏账准备的金额怎么算的
  • 以前年度的损益调整为负值说明什么
  • 暂估入库估多了,汇算清缴前调整
  • 建筑工程劳务分包,工伤责任承担
  • 辞退福利计入什么明细费用
  • 现金支付中的现金是什么
  • 账户分类的作用是什么
  • 外购商品为什么是库存商品
  • 职工福利费扣除税率
  • 营业外收入属于借方还是贷方
  • 商业企业进货会计分录
  • sql server的存储方式
  • fedora os
  • win8经常弹出转到电脑设置
  • ios自定义应用图标
  • freebsd ports安装
  • win7系统玩英雄联盟黑屏怎么办
  • xp系统1
  • drvceox86.exe
  • linux服务器硬件配置要求
  • python hashcode
  • python怎么学啊
  • 老生常谈的道理
  • [置顶]bilinovel
  • angular获取数据给后端
  • jquery22插件网
  • 手游开发流程具体
  • offset function
  • 国家税务总局网站官网福建税务局
  • 吉林省国税税务总局官网
  • 税务局发票邮寄回来怎么读入?
  • 个人转让限售股原值无法确定
  • 政府收回土地条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设