template-web模板引擎的使用

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>

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值