模板引擎基本语法

最新推荐文章于 2022-12-28 17:36:36 发布
最新推荐文章于 2022-12-28 17:36:36 发布
阅读量182 收藏
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62496369/article/details/127117488
版权

模板引擎基本语法


在这里插入图片描述
在这里插入图片描述

例子1

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>模板引擎</title>
	<script type="text/javascript" src="./template.js"></script>
	<script type="text/html" id="resultTemplate">
				 <h1>{{title}}</h1>
				 <!-- books是data数据里面的字段名，并要求books里面的数据是数组格式 -->
         {{each books as value i}}
            <div>{{value}}</div>
         {{/each}}
    </script>

	<script type="text/javascript">
		window.onload = function () {
			var data = {
				title: '四大名著图书信息',
				books: ['三国演义', '水浒传', '西游记', '红楼梦']
			};
			var html = template("resultTemplate", data);
			var container = document.querySelector("#container");
			container.innerHTML = html;
		}
	</script>
</head>

<body>
	<div id="container">

	</div>
</body>

</html>

在这里插入图片描述

例子2

1.data自定义添加一个属性，模板种就能够使用新属性count
2.通过data中的isAdmin判断

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./template.js"></script>
	<script id="test" type="text/html">
				<!-- 通过data中的isAdmin判断 -->
        {{if isAdmin}}
            <h1>{{title}}</h1>
            <h2>一共有{{count}}条数据</h2>
            <ul>
                {{each list as value i}}
                    <li>索引 {{i + 1}} ：{{value}}</li>
                {{/each}}
            </ul>
        {{/if}}

			
        {{if !isAdmin}}
            <h1>没有任何数据</h1>
        {{/if}}

    </script>

	<script>
		window.onload = function () {
			var data = {
				title: '条件判断基本例子',
				isAdmin: true,
				list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
			};
			data.count = data.list.length; //自定义添加一个属性，模板种就能够使用count
			var html = template("test", data);
			document.querySelector("#content").innerHTML = html;
		}
	</script>
</head>

<body>
	<div id="content">

	</div>
</body>

</html>

在这里插入图片描述

例子3

1.有时候可能要对原始的数据进行更改
2.	var data = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
3.这种情况下要新建新的对象，里面添加一个arr属性，并将data数据赋值
4.因为 模板中使用的字段一定是传递数据data中的属性，并要求里面的属性是数组类型

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./template.js"></script>
	<!-- data.data -->
	<script id="test" type="text/html">
        <ul>
            {{each arr as value i}}
                <li>{{value}}</li>
            {{/each}}
        </ul>
    </script>

	<script>
		window.onload = function () {
			var data = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
			var temp = {};//新建新的对象
			temp.arr = data; //里面添加一个arr属性，并将data数据赋值
			var html = template("test", temp);//data.xxx   模板中使用的字段一定是传递数据data中的属性，并要求里面的属性是数组类型
			document.querySelector("#content").innerHTML = html;
		}
	</script>
</head>

<body>
	<div id="content">
		<ul>
			<li>文艺</li>
			<li>博客</li>
		</ul>
	</div>
</body>

</html>

在这里插入图片描述

例子4

1.有可能data数据中的data是标签类型
2.通过{{#value}}进行转义

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="./template.js"></script>
	<script id="test" type="text/html">
        <p>转义：{{#value}}</p>
        <p>默认转义： {{value}}</p>
    </script>

	<script>
		window.onload = function () {
			// 这里的数据当中包含特殊字符
			var data = {
				value: '<span style="color:#F00">hello world!</span>'
			};
			var html = template('test', data);
			document.getElementById('content').innerHTML = html;
		}
	</script>
</head>

<body>
	<div id="content"></div>
</body>

</html>

在这里插入图片描述

Lineason
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sql系列——hive之内置函数
有信念，才能走的更远
09-25 1972
1、数学函数 1.1、四舍五入（保留n位小数） round（a），round（a,b） 1.2、银行家舍入法： broud（a），bround（a，b） 1.3、向下取整、向上取整 floor（a），ceil（a） 1.4、返回随机数（带有种子） rand（），rand（seed） 1.5、对数函数 ln（a）、log10（a）、log2（a）、log（base，a） 1.6、幂函数 exp（a）、pow（a，p） 1.7、平方根函数 sqrt（a） 1.8、二进制、十六进制及
模板引擎基础语法
ithsee_911
06-27 599
模板引擎 模板引擎——它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面。 好处：减少了字符串的拼接，复用性高，利于维护。 使用： //1.下载js文件 template-web.js //2.导入模板引擎的js文件，同时会在全局挂在一个template函数 <script src="template-web.js"></script> //3.定义数据 var data = { name: 'zs', age: 20} //4.定义模板 添加id是为了
模板引擎（笔记了解）
weixin_41824429的博客
07-24 241
一、模板引擎的基础概念 1、模板引擎 模板引擎是第三方模块 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护 2、art-template模板引擎 在命令行工具中使用npm install art-template 命令进行下载 使用const template = require(‘art-template’)引入模板引擎 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据); 3、art-template代码示例 // 导入模板
thymeleaf模板引擎语法及常用指令学习
qq_27577113的博客
12-28 933
在controller类方法中使用org.springframework.ui.Model传参。thymeleaf模板引擎常用指令及表达式。
模板引擎-2-模板引擎提供的模板语法
weixin_42349568的博客
08-19 208
一，基础语法： 可以在里面直接输入模板属性，或者做基本运算，或者三目运算。 二，原文输出 三，条件判断 {{if age > 18}} 年龄大于18 {{else if age < 15}} 年龄小于15 {{else}} 年龄不符合要求 {{/if}} //导入模板引擎，返回值是一个方法 const template=require('art-template') //拼接字符串的第三方模块 const path=require('path') //template 方法.
全网最通俗易懂的Thymeleaf模板引擎（没有之一）
Zystem
09-15 1329
Thymeleaf的主要作用是把model中的数据渲染到html中，因此其语法主要是如何解析model中的数据。 1、变量 1.1、普通变量 实体类 public class User { String name; int age; User friend;// 对象类型属性 } controller @GetMapping("show2") public Str...
templates基础语法
qq_42661906的博客
06-13 737
th:href—引css <link rel="stylesheet" th:href="@{/css/font.css}"> th:src—引js <script th:src="@{/js/jquery-3.5.0.js}"></script> th:value—给input赋值 <input class="layui-input" th:value="${admin.name}" autocomplete="off" placeholder="姓名" na
Javaword的模板引擎对docx格式的文档增加模板语法
08-07
这个模板引擎允许开发者通过简单的模板语法来控制和操作文档内容，极大地提高了效率和代码的可读性。在本文中，我们将深入探讨JavaWord的模板引擎是如何工作的，以及它在处理docx文档中的应用。 首先，让我们理解...
Thymeleaf模板引擎
05-11
Thymeleaf 模板引擎 Thymeleaf 是一款功能强大且灵活的 Java 模板引擎，自 2011 年发布以来，它已经成为了 Java Web 开发中最流行的模板引擎之一。Thymeleaf 的主要特点是它支持 HTML 原型，可以让前端工程师在...
#NAME?_模板引擎
09-21
- **学习成本**：每个模板引擎都有自己的语法和最佳实践，开发者需要花时间学习和适应。 - **性能监控**：尽管大多数模板引擎都会优化性能，但在高并发或大数据量场景下，仍需关注模板渲染的效率。 - **版本更新**...
Twig模板引擎用法入门教程
10-22
以下是对Twig模板引擎的一些关键知识点的详细介绍： 1. **高效性**：Twig将模板编译成优化过的PHP代码，这确保了即使与原生PHP相比，其执行效率也非常高。模板编译的过程减少了运行时解析带来的性能损失。 2. **...
Smarty模板语法详解
10-16
Smarty是一款广泛使用的PHP模板引擎，它允许开发者将HTML和PHP代码分离，使设计人员和开发人员的工作更加独立。...了解并熟练掌握这些基本语法和技巧，能够帮助开发者更高效地利用Smarty模板引擎创建PHP应用程序。
velocity模板引擎-vm语法整理
xinpz的博客
11-20 9552
velocity模板引擎-vm语法整理 模板引擎我目前接触过两次， 第一次是在前后端还未分离时，考虑到部分页面数据比较固定，一定时间内不会变动，这样每次从后台加载数据渲染页面明显会消耗性能以及资源浪费，所以使用模板引擎主动生成静态页面，当时使用的是FreeMarker实现的。 第二次是在邮件发送时，想要直接展示制表符等等，使用velocity引擎，vm模板实现。 目录 velocity模板引擎-vm语法整理 一、Velocity 模板引擎介绍 二、入门HelloWord 三、模板基本语法
模板引擎 art-template基本概念与基础语法
weixin_47505105的博客
02-28 686
模板引擎art-template的用法以及语法
html template
weixin_34248258的博客
10-11 120
  CreateTime--2017年10月11日08:00:42 Author:Marydon 新建html文件模板 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&...
JavaScript模板引擎Template.js使用详解
热门推荐
我竟然是凡人
08-12 11万+
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate
前端模板引擎语法
weixin_34248023的博客
03-26 111
可以尝试选择自己喜欢的模板 <!--Mustache 的模板 --> <script id="Mustache" type="text/tmpl"> <ul> {{#list}} <li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</l...
html模版语法
sandalphon4869的博客
02-11 2078
文章目录 用在<script><script/>中： 单个数据 <script> var size = {{ data }} <script/> 列表 <body> <div class="pic"> </div> </body> <script> {% for each_src in data %} var a = '<img src="'
thymeleaf模板引擎的语法
最新发布
09-13
Thymeleaf模板引擎的语法具有以下几个特点和语法规则： 1. 声明Thymeleaf命名空间：在HTML页面的根元素上添加`xmlns:th="http://www.thymeleaf.org"`命名空间声明。 2. 表达式语法：使用`${}`来显示表达式的值。例如，`${obj.property}`可以用来显示对象的属性值。 3. 迭代循环：Thymeleaf模板使用`th:each`标签进行迭代循环。该标签的语法为`th:each="obj,iterStat:${objList}"`，其中`obj`表示当前迭代的对象，`iterStat`表示迭代状态，`${objList}`表示要迭代的列表。 4. 条件判断：Thymeleaf使用`th:if`和`th:unless`标签进行条件判断。例如，`th:if="condition"`表示如果满足条件则执行相应的逻辑。 5. 属性设置：Thymeleaf使用`th:attr`标签来设置HTML元素的属性值。例如，`th:attr="href=@{'/path/to/resource'}"`可以设置链接的地址。 6. 路径解析：Thymeleaf使用`@{}`来解析URL和路径。例如，`@{/path/to/resource}`可以生成相对路径。 总结起来，Thymeleaf模板引擎通过声明命名空间、使用表达式语法、迭代循环、条件判断、属性设置和路径解析等特点和语法规则，可以将数据动态地渲染到HTML页面中[2]。 引用自Thymeleaf模板的基本特点和语法 引用自Thymeleaf模板使用th:each标签进行迭代循环的说明
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值