<!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>