Mustache的基本语法

循环数组：{{#arr}}{{/arr}}

数据填入：Mustache.render(templateStr,data)

templateStr-->表示模板字符串<div>{{name}}</div>

data-->表示数据，例如：

 循环对象数组实例:

var str =`
				<ul>
				{{#arr}}
					<li>
						<div>{{name}}的基本信息</div>
						<div>
							<p>姓名:{{name}}</p>
							<p>性别:{{sex}}</p>
							<p>年龄:{{age}}</p>
						</div>
					</li>
					{{/arr}}
				</ul>
			`
			var data =
			{
				arr:[
					{
						"name":"小明1","age":12,"sex":"男"	
					},
					{
						"name":"小明2","age":12,"sex":"男"	
					},
					{
						"name":"小明3","age":12,"sex":"男"	
					}
				],
				
			}
			var strdata = Mustache.render(str,data)
			var container= document.getElementById('container')
			container.innerHTML = strdata

不循环实例:

            var str2 =`我买了一个{{name}}`
			var strString = {
				name:"华为手机"
			}
			var strdata = Mustache.render(str2,strString)
			var container= document.getElementById('container')
			container.innerHTML = strdata

循环简单数组:

            var str3 = `<div>
							{{#arr}}
							<p>水果:{{.}}</p>
							{{/arr}}
						</div>`
						var string3 = {
							arr:['草莓','香蕉','苹果']
						}
			var strdata = Mustache.render(str3,string3)
			var container= document.getElementById('container')
			container.innerHTML = strdata

 结果:

数组嵌套：

            var string4 = {
				arr: [{
						"name": "小明1",
						"age": 12,
						"hobby": ['打球', '游泳', '健身']
					},
					{
						"name": "小明2",
						"age": 12,
						"hobby": ['打球1', '游泳2', '健身3']
					}
				],
			}
			var strdata = Mustache.render(str4, string4)
			var container = document.getElementById('container')
			container.innerHTML = strdata

结果:

更方便的编写模板,存储模板字符串，不会被识别为javascript