zoukankan      html  css  js  c++  java
  • template.js遍历对象的写法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="jquery-1.12.2.js"></script>
    <script src="template-native.js"></script>
    <script src="template.js"></script>
    <style>
    table {
    600px;
    border-collapse: collapse;
    }
    td {
    height: 40px;
    text-align: center;
    border: 1px solid #CCC;
    }
    div img{
    display: inline-block;
    50px;
    height: 50px;
    }
    </style>
    </head>
    <body>
    <h1>模板引擎遍历图片对象</h1>
    <div>
    <!--这里插入模板-->
    <!--要先写模板,再写script事件,否则会读取不到模板数据-->
    </div>
    </body>

    +++++++++++++++++++++++++++++++++++++++++++++++++++++这里是模板遍历重点
    <script id="test" type="text/html">//遍历list里的src
    {{each list as item i}}
    <img src="{{item.src}}"/>
    {{/each}}
    </script>

    ++++++++++++++++++++++++++++++++++++++++++++++++++++++这里是模板遍历重点

    //尽量把json写成对象数组形式

    <script>
    var data={
    list:[
    {src:'http://oh99679zy.bkt.clouddn.com/1.jpg'},
    {src:'http://oh99679zy.bkt.clouddn.com/100.jpg'},
    {src:'http://oh99679zy.bkt.clouddn.com/101.jpg'},
    {src:'http://oh99679zy.bkt.clouddn.com/102.jpg'}
    ]
    }
    var html=template('test',data);
    $("div").html(html);//插入div标签里
    </script>
    </html>

  • 相关阅读:
    学习进度表
    数据结构思维导图
    数据结构笔记(树与二叉树)
    图片链接缝隙(a于img) mn
    如何用div实现(滑动条)侧边导航栏 mn
    去除Linux文件中的注释行和空行 mn
    高度塌陷 mn
    初入HTML5
    bcp命令详解转载
    windows 下andriod 开发环境的搭建
  • 原文地址:https://www.cnblogs.com/mcpark/p/6242405.html
Copyright © 2011-2022 走看看