1mustache基本使用

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/mustache/mustache.js"></script>
  </head>
  <body>
    <div class="container"></div>
    <div class="container1"></div>
    <div class="container2"></div>
    <div class="container3"></div>
    <div class="container4"></div>
    <script>
      const container = document.querySelector(".container");
      const data = { thing: "iphone", money: 4444, mood: "happy" };
      const templateStr = `<h3>我今天买了一部{{thing}}手机，花了我{{money}}元，心情好{{mood}}啊</h3>`;
      const res = Mustache.render(templateStr, data);
      console.log(res); //res就是渲染好的模板+数据=dom元素（尚未挂载到页面中）
      console.log(templateStr); //templateStr保持原样不变
      container.innerHTML = res;

      /******************************************************布尔值boolean*******************************************************************/
      const container1 = document.querySelector(".container1");
      const data1 = { isShow: true, message: "hello" };
      const templateStr1 = `{{#isShow}}
        <h3>{{message}} vue</h3>
      {{/isShow}}
      `;
      const res1 = Mustache.render(templateStr1, data1);
      console.log(res1); //注意到一点：当isShow=false res1输出'';当为true时候 输出<h3>hello vue</h3>(尚未挂载到页面中)
      console.log(templateStr1); //还是templateStr1原样输出
      container1.innerHTML = res1;

      /******************************************************普通数组******************************************************************************/
      const container2 = document.querySelector(".container2");
      const data2 = [100, 200, 300, 400];
      //{{#varible}}循环体{{/varible}}
      const templateStr2 = `
      <ul>
          {{#data2}}
            <li>{{.}}</li>
          {{/data2}}
      </ul>
      `;
      const res2 = Mustache.render(templateStr2, { data2 });
      console.log(res2);
      console.log(templateStr2); //还是templateStr2原样输出
      container2.innerHTML = res2;

      /******************************************************对象数组******************************************************************************/
      const container3 = document.querySelector(".container3");
      const data3 = [
        { name: "zs", age: 12, sex: "male" },
        { name: "lise", age: 13, sex: "female" },
        { name: "wangwu", age: 14, sex: "male" },
      ];

      const templateStr3 = `
        {{#data3}}
         <div>
          <h3>{{name}}的基本信息</h3>
          <p>姓名是:{{name}}</p>
          <p>年龄是：{{age}}</p>
          <p>性别是：{{sex}}</p>
          </div>
        {{/data3}}
      `;
      const res3 = Mustache.render(templateStr3, { data3 });
      console.log(res3);
      console.log(templateStr3);
      container3.innerHTML = res3;

      /******************************************************嵌套对象数组******************************************************************************/
      const container4 = document.querySelector(".container4");
      const data4 = [
        { name: "zs", age: 12, sex: "male", hobbies: ["旅游", "学习"] },
        { name: "lise", age: 13, sex: "female", hobbies: ["看书", "吃饭"] },
        { name: "wangwu", age: 14, sex: "male", hobbies: ["上网", "上班"] },
      ];
      const templateStr4 = `
          {{#data4}}
             <ul>
               <h3>{{name}}的基本信息是:</h3>
               <li>姓名是{{name}}</li>
               <li>年龄是{{age}}</li>
               <li>性别是{{sex}}</li>
               <li>爱好是:
                   <ol>
                    {{#hobbies}}
                       <li>{{.}}</li>
                    {{/hobbies}}
                  </ol>
              </li>

            </ul>
          {{/data4}}
      `;
      const res4 = Mustache.render(templateStr4, { data4 });
      console.log(res4);
      console.log(templateStr4);
      container4.innerHTML = res4;
    </script>
  </body>
</html>

 

posted on 2021-01-09 19:07  章画  阅读(122)  评论(0)    收藏  举报

导航