模板引擎

1.模板引擎的使用

（1）引包

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

（2）准备模板

<script type="text/html" id="tpl">                     
        <p>姓名：张三</p>
        <p>年龄：20</p>
        <p>性别：男</p>
        <p>描述：xxx</p>
    </script>

（3）准备数据

<script>
        var obj = {
            name:"小王",
            age:15,
            sex:"男",
            desc:"帅"
        }
</script>

（4）将数据与模板相结合，进行页面渲染   template('模板id',数据对象)

var htmlStr =    template('tpl',obj)
console.log(htmlStr)

（5）将数据对象中的属性添加到模板中   {{  对象属性}}

<script type="text/html" id="tpl">                     
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{sex}}</p>
        <p>描述：{{desc}}</p>
</script>

（6）将字符串模板渲染到页面中

users.innerHTML = htmlStr

2.完整的模板引擎操作

<div id="user">
            //挖空
        </div>
    <script src="./template-web.js"></script>      //引入模板引擎包   
    <script type="text/html" id="tpl">             //准备模板         
        <p>姓名：{{name}}</p>                       //将数据对象中的属性以双花括号的形式添加到模板中
        <p>年龄：{{age}}</p>
        <p>性别：{{sex}}</p>
        <p>描述：{{desc}}</p>
    </script>
    <script>
        var obj = {                                //准备数据
            name:"小王",
            age:15,
            sex:"男",
            desc:"帅"
        }
    var htmlStr =    template('tpl',obj)          //将模板与数据相结合
        console.log(htmlStr)
    var users =    document.getElementById('user')  
    users.innerHTML = htmlStr                     //将字符串模板渲染到页面中
    </script>

 3.模板引擎中的each用法

    <script type="text/html" id="tpl">  
        {{each list v,i}}                   
        <p>{{i}}---{{v}}</p>
        {{/each}}
    </script>

 4.模板引擎中的if用法

（1）if

{{ if sex === 1 }}
        男
      {{ /if }}
      {{ if sex === 0 }}
        女
      {{ /if }}

（2）if    else

{{ if sex === 1 }}
        男
      {{ else }}
        女
      {{ /if }}

（3）if     else if    else

{{ if sex === 1 }}
        男
 {{ else if sex === 0 }}
        女
 {{ else }}
        未知
 {{ /if }}

（4） 三元表达式

  {{ sex === 1 ? "男" : "女" }}

案例：

<script type="text/html" id="tpl">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>

        <p>性别：
            {{ if sex === 1 }}
            男
            {{ /if }}
            {{ if sex === 0 }}
            女
            {{ /if }}
        </p>

        <p>描述：{{desc}}</p>
    </script>