模板引擎

1、 模板 引擎 的步骤

image

1.1语法

通过{{}}进行变量的输出：三元、对象属性、数组、表达式等

点击查看代码 
<!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></title>
    <!-- 第一步导入template的文件 -->
   <script src="./lib/template-web.js"></script>
  
</head>
<body>
    <div id="tem-html"></div>


    <script type="text/html" id="tem-list">
        <!--2、 定义一个模板 -->
        <!-- {{}}是template语法 可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。 -->
        <h3>{{name}} ------ {{age}}</h3>
        <!-- 原文输出 -->
        {{@text}}
        <div>
            {{if flag === 0 }}
            这是if按需输出
            {{/if}}
     
            {{if flag === 1 }}
            这是if按需输出
            {{else if flag ===0}}
            这是else按需输出
            {{/if}}
        </div>
        <ul>
            {{each hobby}}
            <ul>
                <h4>这是循环输出语法：</h4>
                索引：{{$index}} 数值： {{$value}}
            </ul>
            {{/each}}
        </ul>
        <div>
            {{time | funtime}}
        </div>



    </script>

    <script type="text/javascript">
        //6、定义一个过滤器 根据语法 template.defaults.imports.filterName = function(value){/*return处理的结果*/}
        template.defaults.imports.funtime = function(date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate();
         
            return y + '-' + m + '-' + d // 注意，过滤器最后一定要 return 一个值
         }
        

        //3、渲染数据
        var data = { name : 'yyds' , age : 24,text:'<h3>这是原文输出;加一个@</h3>',flag:0,hobby:['吃饭','睡觉','写代码'],time:new Date() }

        //4、调用template函数 获取模板id 渲染data数据
        var htmlstr =template('tem-list',data);
        console.log(htmlstr);
        //5、渲染html结构
        document.getElementById('tem-html').innerHTML=htmlstr;

    </script>

    
    
</body>
</html>
posted @ 2022-10-08 23:38  一梦逐一生  阅读(37)  评论(0)    收藏  举报