模板引擎的使用及简洁原生的判断循环语法使用

模板引擎的使用及简洁原生的判断循环语法使用 1.引入模板引擎 记得引用jQuery

<script src="./lib/template-web copy.js"></script>

2.定义模板 + 定义模板id 要在script标签中

<script type="text/html" id="mb">
    <p>姓名是：{{name}}</p>
    <li>年龄是：{{age}}</li>
    <h3>性别是：{{sex}}</h3>
    <span>
        
        <!-- 使用简洁语法判断年龄 -->
        {{if age ==18}}
        年龄为:{{age}}
        {{else if age >20}}
        年龄为:{{age1}}
        {{else}}
        年龄为:{{age2}}
        {{/if}}
          
    </span>

    <p>
        <!-- 使用原生语法判断年龄 -->
        <% if(age>23){%>
            年龄是：{{age2}}
            <% }else{ %>
                年龄是：{{age}}
                <%}%>

    </p>
    <p>
        <!-- 使用简洁循环语法 -->
        {{each hobby}} 这是：{{$index}} 爱好是：{{$value}} <br>{{/each}}
    </p>

    <p>
        <!-- 使用原生循环语法 -->
        <% for(var i=0;i < newArray.length;i++){ %>
            <%=newArray[i]%>
                <% } %>
    </p>
</script>

3.定义数据

    let obj = {
        name: 'zs',
        age: 23,
        age1: 21,
        age2: 30,
        sex: '男',
        hobby: {
            one: '篮球',
            two: '唱歌',
            three: '跳舞'
        },
        newArray: ['吃饭', '睡觉', '打豆豆']
    }

4.填入数据 调用函数template 注意template返回的是html格式的字符串 要定义一个变量去接收

// template()里面有两个参数 第一个参数是模板id ，第二个是对象
    let str = template('mb', obj)

5.渲染页面(使用jQuery语法获取父级元素div)

$('.box').html(str)

注意点：使用数据的时候不能写{{obj.name}}，只能使用obj里面的数据，除非obj里面还有个obj对象

页面效果图如下：