tmpl 模板字符串

最新推荐文章于 2024-02-21 18:37:42 发布

前端&&&辞耳

最新推荐文章于 2024-02-21 18:37:42 发布

阅读量989

点赞数

文章标签： jquery 前端 html

本文链接：https://blog.csdn.net/qq_56042698/article/details/121983213

版权

最简单的模板：

常用的标签

${}, {{each}}, {{if}}, {{else}}, {{html}}

不常用标签

{{=}},{{tmpl}} and {{wrap}}.

${}等同与{{=}}是输出变量 ${}里面还可以放表达式（=和变量之间一定要有空格，否则无效）

<!DOCTYPE>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>jquery tmpl</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body >
    <table class="table" id="table1" style="width: 500px;"> 
        <tr ><th>AA</th><th>BB</th><th>CC</th><th>DD</th></tr>
    </table>
</body>

<script id="demo" type="text/x-jquery-tmpl">
    <tr>
        <td>{{= ID}}</td>
        <td>{{= Name}}</td>
        <td>${Number(Num)+1}</td>
        <td>${Status}</td>
    </tr>
</script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
<script src="http://cdn.bootcss.com/bootstrap-hover-dropdown/2.0.10/bootstrap-hover-dropdown.js"></script>

<script>
		var users = [{ ID: '250', Name: '辞耳', Num: '100', Status: 1 }, { ID: '11', Name: '哈哈', Num: '23'}];
		$("#demo").tmpl(users).appendTo('#table1');
		
</script>
</html>