介绍
Mustache.js 是一个流行的 JavaScript 模板引擎，它能够自动解析数据和 HTML 模板并生成最终的 HTML 内容。在实际开发中，常常需要根据不同的数据状态来动态地渲染模板，这时就需要使用到条件渲染。
本文将介绍如何使用 Mustache.js 来完成条件渲染。
步骤
1. 安装 Mustache.js
首先，在你的项目中安装 Mustache.js。你可以通过 npm 进行安装：
npm install mustache --save
或者直接在 HTML 中引入：
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>
2. 编写模板
接下来，我们需要编写一个包含条件渲染的 Mustache 模板。以一个简单的示例为例：
<div>
{{#if show}}
显示内容
{{else}}
隐藏内容
{{/if}}
</div>在这个示例中，我们使用了 Mustache 的 {{#if}} 块表达式来实现条件渲染。当 show 为 true 时，显示“显示内容”，否则显示“隐藏内容”。
3. 准备数据
接下来，我们需要为模板准备数据。在本示例中，我们只需要提供一个布尔类型的 show 字段：
const data = { show: true };4. 渲染模板
现在，我们可以使用 Mustache.js 的 render() 方法来渲染模板了：
const template = document.querySelector('#template').innerHTML;
const rendered = Mustache.render(template, data);
document.querySelector('#app').innerHTML = rendered;在这个示例中，我们首先获取了模板字符串，然后使用 Mustache.render() 方法和数据对象将其渲染为 HTML，最后将渲染后的 HTML 插入到页面中。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
---- ---------------
------- ---------------------------------------------------------------------------
------- ------------- -----------------------
-----
----- ------
----
--------
----
-------
------
---------
--------
----- ---- - - ----- ---- --
----- -------- - ----------------------------------------------
----- -------- - ------------------------- ------
---------------------------------------- - ---------
---------
-------
-------结论
通过以上步骤，我们成功地使用 Mustache.js 完成了一个包含条件渲染的模板。当然，Mustache.js 还提供了更多的语法和功能，例如循环、部分视图等等。如果你想深入学习 Mustache.js，可以查看它的官方文档：https://github.com/janl/mustache.js/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8991
