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

  • 房产税从价改从租,多缴税款要加收滞纳金吗
  • 小规模纳税人代扣代缴个人所得税
  • 什么是试算平衡?如何进行试算平衡
  • 预付账款借贷方表示什么意思
  • 印花税的计税依据为各种应税凭证上所记载的计税金额
  • 个人所得税申报是什么意思?
  • 表外负债和表内负债对比
  • 进项票错了但是销项票开出去了怎么办
  • 增值税专用发票电子版
  • 固定资产贷款偿还期计算公式
  • 计提坏账递延所得税资产怎么算
  • 退税勾选后如何开红字
  • 房地产企业增值税预缴
  • 小规模纳税人简易计税方法
  • 水利申报怎么申报
  • 利息收入要不要交增值税?
  • 本单位员工投稿怎么写
  • 对方公司破产债务怎么办
  • 子公司注销后人员怎么安置
  • 如何开锅
  • 财产转移数据缴费怎么交
  • 代理费是指
  • 哪些税金计入存货成本
  • office已经激活
  • 购买固定资产发生的支出是资本性支出
  • php解密在线
  • 会计中在建工程与建筑安装工程的区别
  • 安保费差额纳税是什么意思
  • 高新企业研发费用会计分录
  • 房地产企业土地使用税计算方法
  • 查看chrome浏览器内核版本
  • 企业所得税征收点
  • devtools无法加载源映射less.map
  • laravel使用
  • 未交社保可以要求单位赔偿吗
  • php页面刷新代码
  • 拖拉机拖拉机耕地
  • 使用php进行mysql数据库编程的基本步骤
  • 装修费还没摊销完就搬家了
  • Ubuntu18.04配置允许远程访问
  • tf fans club
  • pytorch1.5
  • 手把手教你安装技嘉b550 master主板
  • 小规模纳税人申报表模板
  • 结转完工产品成本的会计分录
  • 补交之前年度税款怎么调账
  • 滴滴票可以抵扣吗?
  • 未认证的进项税额会计分录
  • 公司小规模纳税人转为一般纳税人,需要签补充协议吗
  • 废品材料回收的会计分录
  • 认缴的出资额
  • 资本化费用为什么会减少
  • 留抵进项税额怎么做分录
  • 银行汇票计入什么会计科目
  • 电费发票未到怎么入账
  • 收到费用发票没有付款的会计分录
  • 股权支付会计处理
  • 其他应收款余额在借方是什么意思
  • 小规模物业广告怎么写
  • 教育行业的成本怎么做账
  • mysql数据库优化面试题
  • mysql5.7免安装版配置
  • task host windows解决
  • dos破解密码输入什么
  • ubuntu添加环境变量后黑屏
  • win7系统点击计算机图标未响应
  • debian与centos详细对比区别
  • windows10已激活
  • windows日历
  • 黑客怎样入侵别人手机
  • windows10无法安装
  • win7关闭uac是什么意思
  • win8电脑设置
  • windows8的ie浏览器在哪
  • unity出现bug
  • unity设置窗口位置
  • js如何打印服务器图片
  • javascript获取html元素的方法
  • 买车险代收车船税合法吗
  • 国税局官网查询平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设