layui将json数据渲染到前端
时间: 2023-10-11 12:07:05 浏览: 134
在layui中,可以使用laytpl模板引擎来渲染json数据到前端。
首先,在html文件中引入layui和laytpl:
```html
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
```
接着,在js文件中使用laytpl的render方法渲染json数据:
```js
// 定义json数据
var data = {
name: '张三',
age: 25,
sex: '男'
};
// 使用laytpl的render方法渲染数据,并将结果填充到id为demo的元素中
layui.use(['laytpl'], function() {
var laytpl = layui.laytpl;
var tpl = document.getElementById('tpl').innerHTML;
laytpl(tpl).render(data, function(html){
document.getElementById('demo').innerHTML = html;
});
});
```
其中,tpl为html模板的id,demo为要填充数据的元素的id。
在html文件中,可以使用laytpl的语法来展示数据:
```html
<script type="text/html" id="tpl">
<div>
<p>姓名:{{ d.name }}</p>
<p>年龄:{{ d.age }}</p>
<p>性别:{{ d.sex }}</p>
</div>
</script>
<div id="demo"></div>
```
这样就可以将json数据渲染到前端了。
阅读全文