mustache语法

mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下，我们可以通过改变传入参数来进行判断】跟小白我来看看该模板的语法吧。

Mustache 的模板语法很简单，就那么几个：

{{data}}

{{#data}} {{/data}}

{{^data}} {{/data}}

{{.}}

{{<partials}}

{{{data}}}

{{!comments}}

借助 Demo 来对语法做简单的介绍：

 1 ...2 <script type="text/javascript" src="mustache.js"></script>3 <script type="text/javascript">4 var data = {5     "name": " xiaohua ",6     "msg": {7         "sex": " female ",  8         "age": " 22 ",  9         "hobit": " reading " 10     },
11     "subject": ["Ch","En","Math","physics"]
12   }  13 14   var tpl = '<p> {{name}}</p>';
15   var html = Mustache.render(tpl, data);16
17　　alert ( html );
18 </script>
19 ...

{{}}就是 Mustache 的标示符，花括号里的 data 表示键名，这句的作用是直接输出与键名匹配的键值，例如：

1 var tpl = '{{name}}';
2 var html = Mustache.render(tpl, data);
3 //输出：
4 xiaohua

以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如改写下 Demo 中的 tpl：

1 var tpl = '{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}';
2 var html = Mustache.render(tpl, data);
3
4 //输出：
5 <p> female, 22, reading</p>

注意：如果{{#data}} {{/data}}中的 data 值为 null, undefined, false；则不渲染输出任何内容。

该语法与{{#data}} {{/data}}类似，不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。

1 var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
2 var html = Mustache.render(tpl, data);
3 //输出：
4 没找到 nothing 键名就会渲染这段

{{.}}表示枚举，可以循环输出整个数组，例如：

1 var tpl = '{{#subject}} <p>{{.}}</p> {{/subject}}';
2 var html = Mustache.render(tpl, data);
3 //输出：
4 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>

以>开始表示子模块，如{{> msg}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：

 1 var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>"2 var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}3 var html = Mustache.render(tpl, data, partials);4 //输出：5 <h1>xiaohua</h1>6 <ul>7    <li>female</li>8    <li>22</li>9    <li>reading</li>
10 </ul>

{{{data}}}

{{data}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}，例如：

1 var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}'
2 //输出：
3 <p>22</p>

!表示注释，注释后不会渲染输出任何内容。

1 {{!这里是注释}}
2 //输出：

在工作中，如果页面上的内容是从后台获取数据并渲染到页面上时，我们就可以使用mustache模板了，值得注意的是，render的数据一定要与键名相符合。

1	`<br><br><br><br>`

转载于:https://www.cnblogs.com/colorful-paopao1/p/7918929.html

mustache语法转自小花大方相关推荐

一、Vue基础语法学习笔记系列——插值操作(Mustache语法、v-once、v-html、v-text、v-pre、v-cloak)、绑定属性v-bind(绑定class、style)、计算属性
一.插值操作 1. Mustache 如何将data中的文本数据,插入到HTML中呢? 我们已经学习过了,可以通过Mustache语法(也就是双大括号). Mustache: 胡子/胡须. 我们可以像 ...
微信小程序Mustache语法
小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...
Mustache 语法
1.Mustache 语法基础: Mustache 是一款「logic-less(轻逻辑)」的前端模板引擎,它原本是基于 javascript 实现的,但是因为轻量易用,所以经过拓展目前支持更多的平台 ...
mustache 语法探析
1: mustache 语法: mustache 语法: 是"胡子"的意思, 因为嵌入标记像胡子 {{}}: mustache 语法, 也被vue 使用. mustache 语法 ...
Mock数据Mustache语法学习记录
简单记录一下Mock数据运行成功. 1.最基础的HTML+jQuery,如何运行Mock数据新建一个文件夹,用于存放mock.min.js文件和mustache.min.js文件,(压缩文件) 代码 ...
微信小程序之mustache语法
近期微信的小程序感觉挺火的,我觉得其实就是一个h5+css+js,不过在此基础上又加入了一些更适合微信的一些改动而已. 本篇主要学习下mustache(嘛思太屎)语法. 一.定义及作用 mustach ...
学习Vue的mustache语法-mustache模板引擎
学习地址 : https://www.bilibili.com/video/BV1EV411h79m?vd_source=a81826692f4afea80764f4048dc1ae0a 代码地址 : ...
mustache语法
mustache 模板,用于构造html页面内容.在实际工作中,当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断.在不好判断的情况下,我们 ...
小程序“Mustache”语法{{}}（双大括号）获取不到值或图片
H5端没问题,在小程序端却不能正常显示. 确认传的值是否为0,小程序会将0解析为不显示,请尝试加上在双大括号的值后加|| 0 .确定data里有没有定义值或图片的变量,若没定义图片变量而直接使用的话也 ...

mustache语法转自小花大方

mustache语法

{{data}}

{{#data}} {{/data}}

{{^data}} {{/data}}

{{.}}

{{>partials}}

{{{data}}}

{{!comments}}

mustache语法转自小花大方相关推荐

最新文章

热门文章

mustache语法 转自小花大方

mustache语法

{{data}}

{{#data}} {{/data}}

{{^data}} {{/data}}

{{.}}

{{>partials}}

{{{data}}}

{{!comments}}

mustache语法 转自小花大方相关推荐

最新文章

热门文章

mustache语法转自小花大方

mustache语法转自小花大方相关推荐