mustache模板引擎怎么使用

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那么模板将不会显示。

在这里插入图片描述
文章参考尚硅谷邵老师教程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值