jquery.tmpl示例

最新推荐文章于 2023-05-30 19:59:38 发布

.NET跨平台

最新推荐文章于 2023-05-30 19:59:38 发布

阅读量195

点赞数

分类专栏： Jquery及其组件

原文链接：https://blog.csdn.net/WuLex

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

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

<script id="demo" type="text/x-jquery-tmpl">
    <div style="margin-bottom: 10px;">
        <span>${ID}</span>
        <span style="margin-left: 10px;">{{= Name}}</span>
        <span style="margin-left: 10px;">${Number(Num)+1}</span>
        <span style="margin-left: 10px;">${Status}</span>
    </div>
</script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script type="text/javascript">
    var users = [
        {
            ID: 'c8848',
            Name: '陈国雄',
            Num: '1',
            Status: 1
        }, {
            ID: 'amy001',
            Name: '张玛莉',
            Num: '2'
        }
    ];
    $("#demo").tmpl(users).appendTo('#div_demo');
</script>
<!-- 数据拼接形式 -->
<script type="text/javascript">
    $.tmpl("<ul><li>${Name}</li></ul>", { "Name": "John Doe" }).appendTo("#div_demo");
</script>
</body>

</html>

如图:

在这里插入图片描述

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery.tmpl示例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="div_demo"></div><scri...
复制链接

扫一扫

专栏目录