artTemplate

最新推荐文章于 2022-06-16 16:52:45 发布

名师点津

最新推荐文章于 2022-06-16 16:52:45 发布

阅读量447

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_51281306/article/details/123978197

版权

笔记专栏收录该内容

100 篇文章 1 订阅

订阅专栏

art-template 是一个简约、超快的模板引擎。

• 网址：https://github.com/aui/artTemplate

• 中文使用文档：https://aui.github.io/art-template/zh-cn/docs/

• 常用语法：

• <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式

• <%= content %>为输出表达式artTemplate 使用步骤

• 引入模板文件

• 创建模板

• 将数据跟模板进行绑定

• 在模板里面编写代码解析数据

• 绑定数据和模板之后得到内容

• 将数据内容写到页面上面。

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>

<script src="js/template-native.js"></script>

<script type="text/html" id="tem">
    
    <% for (var i = 0 ; i < 5 ; i++) { %>
      <div>这是一个模板中的 div<%= i %></div>
      <div>这是一个模板中的 div<%= name %></div>
    <% } %>
    
</script>
</head>
<body>
<div class="box">

</div>
<script>
    // 5、将模板内的内容添加到 box 里面
    // template() 方法可以调用模板内容
    // 参数1：调用的模板的id
    // 参数2：是一个对象型的数据，数据会传给模板，对象中的每个属性的属性名在模板中可以直接当变量名使用
    $(".box").html(template("tem", {name: "tom"}));
</script>
</body>
</html>

名师点津

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
artTemplate

art-template 是一个简约、超快的模板引擎。 • 网址：https://github.com/aui/artTemplate • 中文使用文档：https://aui.github.io/art-template/zh-cn/docs/ • 常用语法： • <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式 • <%= content %>为输出表达式artTemplate 使用步骤 • 引入模板文件 • 创建模板 • 将数据跟模板进行绑
复制链接

扫一扫