template-web模板引擎的使用

最新推荐文章于 2021-09-21 14:43:13 发布

weixin_lqq

最新推荐文章于 2021-09-21 14:43:13 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： html html5 javascript

本文链接：https://blog.csdn.net/weixin_52119040/article/details/120383637

版权

笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

template-web是什么?

这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。

template-web怎么使用

1. each遍历语句的使用

<!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>
    <table></table>
    <!-- 1. 引入模板引擎js代码-->
    <script src="./assets/lib/template-web.js"></script>
    <script type="text/html" id="template">
    // 使用template-web.js自带的循环语句,对数据进行遍历并渲染
          {{each data}}
                <tr>
                    <td>{{$value.name}}</td>
                    <td>{{$value.age}}</td>
                    <td>{{$value.phone}}</td>
                    <td>{{$value.sex}}</td>
                </tr>
          {{/each data}}
    </script>
    <script>
        // 2. 准备好模板
        let tb = document.querySelector('table')
        let data = [{
            name: 'andy',
            age: 19,
            phone: '111111111',
            sex:'女'
        },{
            name: 'mary',
            age: 17,
            phone: '333333333',
            ex:'女'
        },{
            name: 'mark',
            age: 12,
            phone: '222222222',
            ex:'男'
        }]
        let res = template('template',{data:data})  // 可以简写  let res = template('template', data)
        
        // 把模板放到页面中
       tb.innerHTML = res
    </script>
</body>
</html>

输出结果为:
在这里插入图片描述

2. if语句的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="ifBox"></div>
<!--引入模板引擎-->
<script type="text/javascript" src="./assets/lib/template-web.js" ></script
<script type="text/html" id="ifTemplate">
<ul>
    <!-- if语句的使用 -->
    {{if sex=="女"}}
    <li>姓名:{{name}} 女士
       <ol>
           <li>下午好</li>
           <li>你真{{skill}}</li>
       </ol>
    </li>
    {{else if sex=="男"}}
    <li>姓名:{{name}} 先生
        <ol>
            <li>下午好</li>
            <li>你真{{skill}}</li>
        </ol>
    </li>
    {{/if}}
</ul>
</script>
<script type="text/javascript">

    //定义数据
    var person1 = {
        name:"pink德华",
        sex:"男",
        skill:"帅"
    };
    var person2 = {
        name:"胡晓晓",
        sex:"女",
        skill:"漂亮"
    };
    //  利用模板引擎 引用数据填充到模板中
   var result =  template("ifTemplate",person1);
    var result2 =  template("ifTemplate",person2);
    //将返回的模板结果添加到界面中
    var ifBox = document.getElementById("ifBox");
    ifBox.innerHTML = result + result2;
</script>
</body>
</html>

输出结果为:
在这里插入图片描述

weixin_lqq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
template-web模板引擎的使用

template-web是什么?这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。template-web怎么使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
复制链接

扫一扫

专栏目录