写第一个 handlebars 模板引擎

Handlebars : 官网

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>老程</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>

<body>

</body>

<script type="text/x-handlebars-template" id="tpl">
    <div class="demo">  
        <h1>{{name}}</h1>
        <p>{{content}}</p>
        <p>each:</p>
        {{#each something}}
        <p>
            <span>{{saying}}</span>
            <span style="margin-left:8px">————{{author}}</span>
        </p>
        {{/each}}
    </div>
</script>

<script type="text/javascript">
    var params = {
        something: [{
            author: '尤大',
            saying: '弄了个Vue'
        },
        {
            author: '乔帮主',
            saying: '弄了个pc杀手'
        }],
        name: '城南花已开',
        content: '————三亩地'
    }; //要插入模板的参数数据
    var template = document.getElementById('tpl').innerHTML;
    console.log('模板内容:', template);
    var fuc = Handlebars.compile(template); //使用handlebars对转换后的html字符串进行编译,f是函数
    var element = fuc(params);
    console.log('转换后内容:', element);
    let div = document.createElement('DIV')
    div.innerHTML = element
    document.body.appendChild(div)
</script>

</html>

SUCCESS !
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

#老程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值