模版引擎和AJAX的使用

1.准备存放数据的盒子

 2.引入核心文件

3.定义模板

 4.调用template函数

 5.按照模板的语法添加内容

模板语法 
            1.{{}} 因为传递来的是对象 那么其中的属性可以之间调用
            2.循环  {{each data.users}}循环体 {{/each}}
            3.判断  {{if 判断条件}} {{/if}}

    <div id="app"></div>
   
    <script src="./template-web.js"></script>
   
    <script id="temp" type="text/html">
       
    {{each data.users}}
    <div>
        <a href="#">id:{{$value.id}}</a>
        <h3>name:{{$value.name}}</h3>
        <p>age:{{$value.age}}</p>
        {{if $value.age>=22&&$value.age<24}} <p>年龄超过22</p>//判断年龄范围
            {{else if $value.age>=24}}<p>年龄超过24</p>
            {{/if}}
           
    </div>
    {{/each}}
    </script>
   
    <script>
        var data = {
            msg: "数据",
            users: [
                { id: 1, name: "小张", age: 18 },
                { id: 2, name: "小王", age: 28 },
                { id: 3, name: "小李", age: 22 },
                
            ]
        }
        var html = template("temp", { data: data })

        document.getElementById("app").innerHTML = html
    </script>

效果图