template-web.js 使用二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        div{
            border: red 1px solid;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <div id="ifBox"></div>
    <div id="norBox"></div>
    <div id="eachBox"></div>

<!--引入模板引擎:一般用于在网络请求之后,展示相同的多条数据-->

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


<!--2.原文输出-->

<script type="text/html" id="norTemplate">
     <ul>
         <li>{{name}}</li>
         <li>{{skill}}</li>
         <li>{{@info}}</li>
     </ul>
</script>
<script type="text/javascript">
    var data = {
       name:"漩涡鸣人",
       skill:"多重影分身",
       info:"<a href='https://baike.baidu.com/item/%E6%BC%A9%E6%B6%A1%E9%B8%A3%E4%BA%BA/322717?fr=aladdin'>个人信息</a>"
    };
    var result = template("norTemplate",data);
    var norBox = document.getElementById("norBox");
    norBox.innerHTML = result;
</script>

<!--3.循环语句-->

<script type="text/html" id="eachTemplate">
     <ul>
         <li>组织: {{key}}}</li>
         <li>组员:
             {{each person}}
               <ol> {{$index}}{{$value}} </ol>
             {{/each}}
         </li>
         <li>组员信息:
             {{each info}}
             <ol>{{$value.name}} --- {{$value.age}} </ol>
             {{/each}}
         </li>
     </ul>
</script>
<script type="text/javascript">
      var family = {
          key:"APP开饭团队",
          person:[
              "刘强",
              "黄冲",
              "熊斌"
          ],
          info:[
              {name:"刘强",age:23},
              {name:"黄冲",age:26},
              {name:"熊斌",age:22}
          ]
      };
      var result = template("eachTemplate",family);
      var eachBox = document.getElementById("eachBox");
      eachBox.innerHTML = result;
</script>
</body>
</html>

原文链接:https://blog.csdn.net/qq_33429583/java/article/details/79678443
posted @ 2020-07-09 11:09  王玉岩  阅读(477)  评论(0编辑  收藏  举报