不循环数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>不循环数组</title>
</head>
<body>
  <div id="container"></div>
  <script type="module">
    import mustache from './lib/mustache.js';
    const mustacheStr=`
      <h2>我买了一部{{phone}}手机，好{{mood}}呀！</h2>
    `;

    const data={
      phone:'苹果',
      mood:'开心'
    };

    const domStr=mustache.render(mustacheStr,data);
    document.getElementById('container').innerHTML=domStr;
  </script>
</body>
</html>

显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>显示或隐藏</title>
</head>
<body>
  <div id="container"></div>
  <script type="module">
    import mustache from './lib/mustache.js';

    const mustacheStr=`
      {{#flag}}
        <span>hello</span>
      {{/flag}}
    `;

    const data={
      flag:false
    };

    const domStr=mustache.render(mustacheStr,data);
    document.getElementById('container').innerHTML=domStr;
  </script>
</body>
</html>

循环对象数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用mustache</title>
</head>
<body>
  <div id="container"></div>
  <script type="module">
    import mustache from './lib/mustache.js';
    const mustacheStr=`
      <ul>
        {{#arr}}
          <li>
            <h3>{{name}}的信息</h3>
            <span>名字：{{name}}</span>
            <span>年龄：{{age}}</span>
            <span>性别：{{sex}}</span>
          </li>
        {{/arr}}
      </ul>
    `;

    const data={
      arr:[
        {
          name:'小红',
          age:21,
          sex:'男'
        },
        {
          name:'小李',
          age:22,
          sex:'男'
        },
        {
          name:'小王',
          age:21,
          sex:'男'
        }
      ]
    };
    const domStr=mustache.render(mustacheStr,data);
    document.getElementById('container').innerHTML=domStr;
  </script>
</body>
</html>

循环简单数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环简单数组</title>
</head>
<body>
  <div id="container"></div>
  <script type="module">
    import mustache from './lib/mustache.js';
    const mustacheStr=`
      <ul>
        {{#arr}}
          <li>{{.}}</li>
        {{/arr}}  
      </ul>
    `;

    const data={
      arr:['a','b','c']
    }

    const domStr=mustache.render(mustacheStr,data);
    document.getElementById('container').innerHTML=domStr;
  </script>
</body>
</html>

循环嵌套数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环嵌套数组</title>
</head>
<body>
  <div id="container"></div>
  <script type="module">
    import mustache from './lib/mustache.js';
    const mustacheStr=`
      <ul>
        {{#arr}}
          <li>{{name}}</li>
          <li>{{age}}</li>
          <li>
            <h2>爱好</h2>
            <ol>
              {{#hobbies}}
                <li>{{.}}</li>
              {{/hobbies}}
            </ol>
          </li>
        {{/arr}}
      </ul>
    `;
    
    const data={
      arr:[
        {
          name:'小王',
          age:21,
          hobbies:['游泳','篮球']
        },
        {
          name:'小红',
          age:22,
          hobbies:['乒乓球','电竞']
        }
      ]
    }

    const domStr=mustache.render(mustacheStr,data);
    document.getElementById('container').innerHTML=domStr;
  </script>
</body>
</html>

ES5模板写法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>循环嵌套数组</title>
</head>
<body>
  <script type="text/template" id="template">
    <ul>
      {{#arr}}
        <li>{{name}}</li>
        <li>{{age}}</li>
        <li>
          <h2>爱好</h2>
          <ol>
            {{#hobbies}}
              <li>{{.}}</li>
            {{/hobbies}}
          </ol>
        </li>
      {{/arr}}
    </ul>
  </script>
  <div id="container"></div>
  <script type="module">
    import mustache from './lib/mustache.js';
    const mustacheStr=document.getElementById('template').innerHTML;
    
    const data={
      arr:[
        {
          name:'小王',
          age:21,
          hobbies:['游泳','篮球']
        },
        {
          name:'小红',
          age:22,
          hobbies:['乒乓球','电竞']
        }
      ]
    }

    const domStr=mustache.render(mustacheStr,data);
    document.getElementById('container').innerHTML=domStr;
  </script>
</body>
</html>