mustache是最早的模板引擎库,它的底层实现机理为后续模板引擎的发展提供了崭新的思路。
使用
需要引入mustache库https://www.bootcdn.cn/mustache.js/
循环数组示例:
其中{{#arr}}和{{/arr}}是模板语法的起始和结束语句,其中的arr是需要渲染的数据对象,而起始和结尾语句中间的内容就是模板的HTML代码了,至于中间需要渲染的数据,只需要使用{{变量名}}占位即可。
那么我们需要怎么让mustache引擎起作用呢?
此时我们需要使用mustache引擎中的一个render方法,让上面的代码生效,变成浏览器认识的HTML代码。
**mustache.render()**方法接收两个参数,第一个参数是模板代码,也就是上面代码块中的展示的,第二个参数是渲染需要的数据对象。
数组嵌套示例:
上面的循环数组示例很多方法都能做到,ES6中的模板字符串搭配for循环比起mustache甚至更加方便,但是当我们渲染的数据中存在嵌套时再用模板字符串是不是就无从下手了呢。比如下面这种:
对于循环中存在嵌套新数组的情况,mustache依然能完成工作,因为mustache本身就是可以继续嵌套的,就像这样:
我们在arr的循环中又加入了hobbies的循环。这里值得一提的是,如果我们的数据对象中只有一个数据段,那此时我们是可以用 . 来代替字段名称的。
布尔值判断是否显示
mustache也可以判断数据的布尔值,如果渲染的数据对象是true那么渲染的模板正常显示,如果是false那么模板将不会显示。
文章参考尚硅谷邵老师教程