mustache模板引擎

模板导入

<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.min.js">
</script>

HTML数据:

<div id="table"></div>

数据插入

// 数据插入
let template = "<h1>{{ name }}语文考了{{ score }}分</h1>"
data = {name: "小明", "score":70}
let r = Mustache.render(template, data);
document.getElementById("tab").innerHTML = r;

输出内容：

数据循环

// 单循环
let template = `
	<ul>
		{{#arr}}
			<li>{{.}}</li>  
		 {{/arr}}  
	</ul>
`
let data = {
	arr:[1,2,3,4,5,6],
};
let r = Mustache.render(template, data);
document.getElementById("tab").innerHTML += r;
/* +=是追加数据   =是覆盖数据 */

单循环输出内容

// 多循环
let template = `
	<ul>
		<li>学号|姓名|语文成绩|数学成绩|英语成绩</li>
		{{ #item }}
				<li>
				{{ id }}
				|{{ name }}
				{{ #score }}|{{ . }}{{ /score }}
			</li>
		{{ /item }}
	</ul>
`
let data = {
	item: [
		{id:0, name:"小红", score:[60, 60, 60]},
		{id:1, name:"小明", score:[70, 70, 70]},
		{id:2, name:"小丽", score:[80, 80, 80]},
	]
}
let r = Mustache.render(template, data);
document.getElementById("tab").innerHTML = r;

多循环输出内容

数据判断

// if-else判断
let template = `
    {{#isShow}}1{{/isShow}}
    {{^isShow}}0{{/isShow}}
`
let data = {isShow:true}; // isShow为true显示1
// let data = {isShow:false}; // isShow为false显示0
let r = Mustache.render(template, data);
document.getElementById("tab").innerHTML += r

输出内容