当前位置：网站首页>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

边栏推荐

猜你喜欢

随机推荐