通过json文件渲染到页面

1.为了方便获取把json放到public文件夹里面

2.获取数据
如果没出来效果把result去掉就可以了

  created() {this.$http.get("/list.json").then((res) => {console.log(res);this.arr = res.data.result;});},

3.然后开始渲染页面，这个是图片九宫格，使用了懒加载

 <van-grid :column-num="2"><van-grid-item v-for="(item,index) in arr"  :key="index" icon="photo-o" text="文字" >
<!-- lazy-load设置图片懒加载，是一个自定义指令 --><van-image width="100%"  :src="item.pic" lazy-load /><p class="p1">{{ item.title }}</p><div class="one"><p class="p2">￥{{ item.price }}</p><p><van-icon name="shopping-cart-o" /></p></div></van-grid-item>

通过json文件渲染到页面相关推荐

Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
通过nodejs 服务器读取HTML文件渲染到页面
1.分别简单实现三个备用页面. login.html页面 index.html页面代码片段: <!DOCTYPE html> <html> <head> < ...
创建json数组与json数组渲染到HTML
json数组格式大家都不陌生,与python的字典一样,简而言之就是JS当中的数据类型, 那我们如何把数据类型展示出来,模拟数据库SQL语句查询方法获取数据 html: //简单的DIv盒子包裹,命 ...
动态获取本地json文件，渲染为表格-前端html+css+javascript，nth-child选择器，实时浏览插件，vscode，ajax
从本地获取到json文件,并进行动态的渲染demo来啦~ 此文章对table表格,nth-child()选择器,插入html标签做的小demo,大佬请绕道,感兴趣的uu可以安心"食用&quo ...
md 文件使用html阅读,使用markdow-it渲染md文件为html页面
前言:最近在写一些新闻资讯详情的页面,header组件.footer组件.目录组件都是固定的,只有新闻的内容是变化的.为了不去写重复的代码(有句话怎么说来着:战略上偷懒,战术上勤奋,就是这个意思),准 ...
Open3d 获取渲染和固定视角json文件及读入
1. Open3d的渲染交互在使用open3d对点云进行可视化,使用一个自己喜欢的渲染风格是很有必要的,open3d提供了一个调节渲染的方法,当你运行程序,打开open3d的窗口,鼠标点击窗口,按H ...
js文件导入前端页面无法渲染的问题
之前修改了一个用后端渲染前端页面的一个首页代码,都是用原声html写的,后期想用bootstrap和其他插件对其页面进行渲染一下,发现在js文件中加入class样式时,前端页面竟然没有显示,在浏览器中 ...
使用PHP通过AJAX获取到JSON文件的数据,点击按钮后添加url 跳转到指定页面
html前端页面.通过AJAX异步获取内容 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
uni - app 的 pages.json 文件页面配置与全局配置
1. 新建页面 pages 文件上右键新建页面创建同名目录,注册 pages.json ,使用 scss 页面页面新建完成: 且 pages.json 文件中已经注册,这个注册和原生微信小程序 ...

通过json文件渲染到页面

通过json文件渲染到页面

通过json文件渲染到页面相关推荐

最新文章

热门文章