模板引擎的使用步骤和语法

最新推荐文章于 2022-05-05 18:12:17 发布

李大璟

最新推荐文章于 2022-05-05 18:12:17 发布

阅读量326

点赞数

分类专栏： js 文章标签： js 前端

本文链接：https://blog.csdn.net/weixin_38007986/article/details/111445192

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

模板引擎的使用步骤

导入template-web.js文件
准备数据对象
准备模板
调用模板template函数,生成html字符串
把内容渲染到页面中

<body>
    <div id="container"></div>
    <!-- //step3:准备模板 -->
    <script type='text/html' id="tpl">
        <!-- 这里传的是属性 -->
        <h1>{{name}}----{{age}}----{{dog.color}}</h1>
        <h1>{{hobby[0]}}</h1>
        <h1>{{dog['color']}}</h1>
        <h1>{{age+10}}</h1>
        <h1>{{'dengjinliang name is '+name}}</h1>
        <h1>{{merry == true? '已婚':'未婚'}}</h1>
                <!-- 原文输出 @前不能有空格后面可以有 -->
        <div>{{@hh}}</div>
                <!-- 条件输出 -->
        {{if score >= 80}} 优秀 {{else if score >= 70}} 良好 {{/if}}
        <ul>
        <!-- 遍历 $value是里面的元素 -->
            {{each hobby}}
            <li>{{$index}}----{{$value}}</li>
            {{/each}}
        </ul>
        <!--  -->
        <ol>
            {{each friend}}
            <li>
                <p>{{$value.name}}</p>
                <ul>
                    {{each $value.hobby}}
                    <li>{{$value}}</li>
                    {{/each}}
                </ul>
            </li>
            {{/each}}
        </ol>
      
    </script>
    <!-- step1:导入文件 -->
    <script src="js/template-web.js"></script>
    <script src="./js/jquery.js"></script>
    <script>
            //step2:准备数据对象  
        var obj = {
                money: 100000,
                regTime: new Date(),
                name: 'shabi',
                age: 20,
                hobby: ['喝酒', '敲代码', '唱歌'],
                merry: false,
                dog: {
                    color: '大黄'
                },
                hh: '<h1>哈哈哈</h1>',
                score: 70,
                friend: [{
                        name: 'lisi',
                        hobby: ['chouyan', 'hejiu']
                    }, {
                        name: '张三',
                        hobby: ['chouyan', 'hejiu', '打豆豆']
                    }, {
                        name: '王五',
                        hobby: ['chouyan', 'hejiu', '聊天']
                    }

                ]

            }
            //step4:调用模板template函数,生成html字符串
        var htmlStr = template('tpl', obj)
            // console.log(htmlStr)
            //step5:把内容渲染到页面中
        $('#container').html(htmlStr)
    </script>
</body>