模板引擎

最新推荐文章于 2023-05-03 15:15:48 发布

@hxl

最新推荐文章于 2023-05-03 15:15:48 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/qq_38105960/article/details/100997153

版权

使用模板引擎可以解决问题，代码的偶合度，代码的修改与维护。
模板引擎：把数据转成html格式的字符串使用原生语法
官网
使用方法：
1.下载导入

2.创建模板

<script type="text/template" id='模板id名'></script>
或<script type="text/html" id='模板id名'></script>

3.把数据使用在模板里在js中
template(‘模板id’,{必须是对象，你要渲染的数据})

4.该方法返回html格式字符串
art-template官网

5.使用全局变量辅助方法：
①传递数据{console：console}
②template.helper(name, callback)添加辅助方法，让模板引擎调用自定义的javascript方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="box"></div>

<!--1.导入-->
<script type="text/javascript" src="微金所响应式/js/template-native.js"></script>
<!--2.创建模板-->
<script type="text/template" id="template">
    <%console.log(list)%>
    <%for(var i=0; i < list.length;i++){%>
    <h1><%=list[i].username%><%=list[i].play%></h1>
    <%}%>
</script>
<script>
    var arr = [{"username": "小明", "age": "12"}, {"username": "小鱼", "age": "18"}];
    //3.调用template()
    var html = template('template', {list: arr,console:console});
    console.log(html);
    document.querySelector('.box').innerHTML = html;
</script>
</body>
</html>

在这里插入图片描述

@hxl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板引擎

使用模板引擎可以解决问题，代码的偶合度，代码的修改与维护。模板引擎：把数据转成html格式的字符串使用原生语法官网使用方法：1.下载导入2.创建模板<script type="text/template" id='模板id名'></script>或<script type="text/html" id='模板id名'></script&g...
复制链接

扫一扫