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

  • 计入税金及附加的税种口诀
  • 社保可以抵扣什么税
  • 销售费用福利费编码
  • 赞助费账务处理
  • 一般纳税人技术服务免税发票怎么开
  • 应收账款转入呆账如何做帐
  • 自然人转让股权给自己的公司
  • 不随物品一起销售的包装物怎么做账?
  • 投资性房地产租赁期开始日
  • 分包挂靠认定依据
  • 或有负债记入哪个科目?
  • 开出增值税发票没收到怎么抵扣进项税?
  • 建筑安装税务分类编码为多少?
  • 营改增后企业所得税
  • 停车服务费的税率
  • 建筑企业法定代表人和建筑公司资质不是一个人
  • 涉嫌虚开发票的几种情况
  • 业务招待费如何进行纳税调整
  • linux sed命令详解
  • Win11 Build 22000.132 预览版 ISO 官方镜像下载与安装
  • 企业并购效益
  • 怎么删除office
  • 跨区域涉税事项报告表报验流程
  • 以租代购怎么入账
  • 公司帮人代缴社保怎么做账
  • 材料成本差异贷方表示
  • 编制收款凭证的有哪些
  • windows7旗舰版最新版本
  • 对数组描述正确的是
  • 临时工的工资需要缴纳工会经费吗
  • 集团公司收到的上级秘密
  • 浅谈php技术
  • php去除指定字符
  • laravel注入
  • laravel 5.4中实现无限级分类的方法示例
  • 弃置费用预计负债递延所得税怎么处理
  • 正在求偶的凤头卡拉鹰,美国德克萨斯州 (© Alan Murphy/Minden Pictures)
  • sql1000*1.0
  • 所有者权益合计怎么算
  • 织梦配置文件
  • 建筑业 成本
  • 企业的专利年费是多少
  • server2003dns配置
  • 自产用于捐赠的会计处理
  • 发票冲红视频教程
  • 资源税会计科目
  • 车辆处置如何缴纳企业所得税
  • 现金发放工资有什么风险
  • 物流公司的会计怎么样
  • 票据贴现怎么入账
  • 个人所得税如果不补税会怎么样
  • 收到货款会计分录怎么写
  • 新租赁准则入账
  • 商品折扣计入哪个科目
  • 什么是对公账户?
  • 其他应收款核算什么
  • MAC怎么将单独一个应用静音
  • CentOS7的hostnamectl命令使用详解
  • linux管理工具有哪些
  • bios是什么怎么设置
  • win8怎么进去安全模式
  • 进程registry
  • go进程管理
  • windows恶意软件删除工具怎么安装
  • 边做游戏边学
  • opengl绘制简单矩形代码
  • dos 浏览器
  • jqueryvalidate验证
  • bat获取当前路径的值
  • node.js网站
  • 如何搭建python项目架构
  • javascript常用的数据类型有哪些
  • jquery做下拉
  • android获取sha1
  • 湖南省国家税务总局官网登录入口
  • 财务顾问属于什么业务
  • 北京税务师取消了吗
  • 企业滞纳金怎么算 计算公式
  • 非房地产企业转让旧房土地增值税
  • 个体开专用票需要进项吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设