template.js的日常用法

1.遍历

    <div id="newInfo">
       <script type="text/html" id="informationDetails">
        <div class="info">
                <p>{{list.title}}</p>
        </div>
      </script>
    </div>

这是一个简单遍历

2.循环

    <div id="home">
       <script type="text/html" id="news">
       {{each list as value index}}
        <div class="home_list" >
           <div class="home_list_content">
              <p class="content_title">{{value.title}}</p>
              <div class="content_description">{{value.body}}</div>
           </div>
        </div>
      {{/each}}    
      </script>
    </div>

这是一个简单循环

3.循环嵌套

<tbody id="tbody">
               <script type="text/html" id="baggage">
               {{each list as value index}}
                    <tr class="colspan">
                        <th colspan="4">{{value.rule_category_name}}</th>
                    </tr>
                    {{include 'matter' value.rule}}
                 {{/each}}    
                 </script> 
                <script type="text/html" id="matter">
                {{each data as value index}} 
                    <tr>
                        <td class="table_th">{{index+1}}</td>
                        <td class="table_t2">{{value.rule}}</td>
                    </tr>
                {{/each}} 
                </script>
             </tbody>                       
          </table>

根据后台返回数据的一个简单循环嵌套，数据样式：

{
    "data": [
        {
            "id": 24,
            "travel_id": "2",
            "type": "30",
            "rule_category_name": "其他物品",
            "rule": {
                "data": [
                    {
                        "id": 25,
                        "rule_category_id": 24,
                        "rule": "Saepe nulla animi delectus consectetur non.",
                        "is_created": 1,
                        "examines": {
                            "id": 108,
                            "user_id": 1,
                            "rule_id": 25,
                            "before": true,
                            "after": true,
                            "created_at": null,
                            "updated_at": "2019-01-04 16:28:49"
                        }
                    }
                ]
            }
        }

]}

4.判断

{{if testValue==22}}

     <h1>线上</h1>

{{else if testValue==33}}

       <h2>隐藏</h2>

{{else}}

<h3>走这里</h3>

{{/if}}