当前位置:网站首页>art-template 模板引擎
art-template 模板引擎
2022-04-23 09:51:00 【MyDreamingCode】
一、简介
说明:由于用字符串形式手动写入DOM元素,比较麻烦,于是引用模板。
总共提供两个东西:1.数据 2.模板 ps:外加一个js文件
template-web.js : 提供template函数 参数为 id, data
注意:在模板时,另用一个script标签,type="text/html":
1. 引入js文件
<script src="jquery.js"></script>
<script src="template-web.js"></script>
2. 提供数据
<script>
var data = {
name:'zhangsan',
age:18,
hobby:[
'足球',
'篮球',
'手工'
]
}
</script>
3. 提供模板
<script type="text/html" id="content-template">
<p>我的名字叫{
{name}}</p>
<p>今年{
{age}}岁</p>
<p>{
{if age >= 18}}可以上网{
{else if age < 18}}不允许上网{
{/if}}</p>
<p>我的爱好有:</p>
<ul>
{
{each hobby}}
<li>{
{$index}}:{
{$value}}</li>
{
{/each}}
</ul>
{
{@text}}
</script>
二、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script src="jquery.js"></script>
<script src="template-web.js"></script>
<script type="text/html" id="content-template">
<p>我的名字叫{
{name}}</p>
<p>今年{
{age}}岁</p>
<p>{
{if age >= 18}}可以上网{
{else if age < 18}}不允许上网{
{/if}}</p>
<p>我的爱好有:</p>
<ul>
{
{each hobby}}
<li>{
{$index}}:{
{$value}}</li>
{
{/each}}
</ul>
{
{@text}}
<div>注册时间:{
{time|dateFormat}}</div>
</script>
<script>
var data = {
name:'zhangsan',
age:18,
hobby:[
'足球',
'篮球',
'手工'
],
text:'<a href="javascript:;">Happy</a>',
time:new Date()
}
template.defaults.imports.dateFormat = function(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + m + '-' + d;
}
var htmlStr = template("content-template",data);
$("#content").html(htmlStr);
</script>
</body>
</html>
版权声明
本文为[MyDreamingCode]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_61706112/article/details/124280270
边栏推荐
- Expansion of number theory Euclid
- MySQL - Chapter 1 (data types in MySQL)
- AI上推荐 之 MMOE(多任务yyds)
- [codeforces - 208e] blood cousins
- Windows安装redis并将redis设置成服务开机自启
- Comparison of overloading, rewriting and hiding
- 元宇宙时代的职业规划与执行
- Less than 100 secrets about prime numbers
- JS case to find the maximum value, reverse the array, bubble sort
- Mobius inversion
猜你喜欢
Redis exception read error on connection solution
How to obtain geographical location based on photos and how to prevent photos from leaking geographical location
Alibaba cloud architects interpret the four mainstream game architectures
Personal homepage software fenrus
Redis 内存占满导致的 Setnx 命令执行失败
構建元宇宙時代敏捷制造的九種能力
Setnx command execution failed due to full redis memory
中控学习型红外遥控模块支持网络和串口控制
JSON input of Chapter 14 of kettle paoding jieniu
Simple understanding of arguments in JS
随机推荐
SAP RFC_ CVI_ EI_ INBOUND_ Main BP master data creation example (Demo customer only)
[Niuke practice match 68] fans of Niuniu (matrix fast power cycle matrix optimization)
Yarn资源调度器
failureForwardUrl与failureUrl
Flink 流批一体在小米的实践
Personal homepage software fenrus
Solving Lucas number and combination theorem
1 + X cloud computing intermediate -- script construction, read-write separation
Three challenges that a successful Devops leader should be aware of
Educational Codeforces Round 81 (Rated for Div. 2)
面试官:说几个PHP常用函数,幸好我面试之前看到了这篇文章
Redis 过期 key 清理删除策略汇总
Where is int a = 1 stored
Windows安装redis并将redis设置成服务开机自启
阿里云架构师解读四大主流游戏架构
实践六 Windows操作系统安全攻防
Computer network security experiment II DNS protocol vulnerability utilization experiment
PHP two-dimensional array specifies that the elements are added after they are equal, otherwise new
[COCI] Vje š TICA (subset DP)
Expansion of number theory Euclid