arttemplate模板

最新推荐文章于 2023-01-03 12:34:09 发布

强哥blog

最新推荐文章于 2023-01-03 12:34:09 发布

阅读量748

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_36263601/article/details/73189269

版权

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个使用HTML与JavaScript实现的简单网页模板，该模板用于展示电影的基本信息，包括电影名称、导演及主演等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src='template.js'></script>
</head>
<body>
<h1>最新上映电影：</h1>
<div id='mydiv'></div>
</body>
</html>
<!--模板王者演示-->
<script id="arttemplate" type="text/html">
    <strong>电影名称：</strong>{{name}}<br>
    <strong style='color:red'>导演</strong>{{lead}}<br>
    <strong style='color:green'>主演:</strong>{{role}}
</script>
<script>

    //标准json定义-- 必须有标题，必须有双引号
    var film = {
        name: "没人鱼",
        lead: "周星驰",
        role: "邓超",
    };


    var html = template('arttemplate', film);
    document.getElementById('mydiv').innerHTML = html;

// 将模板封装成一个函数
BindTemplate(film,'mydiv','arttemplate')
    //封装成一个函数
    function BindTemplate(data, divid, Template) {
        //alert(divid);
        //alert(Template);
        var html = template(Template, data);
        document.getElementById(divid).innerHTML = html;
    }

</script>