看了Mustache的github,学学此中的语法,做个笔记

1.简单的变量调换:{{name}}

1 var data = { "name": "Willy" };
2 Mustache.render("{{name}} is awesome.",data);

返回成果 Willy is awesome.

2.若是变量含有html的代码的,比如:<br>、<tr>等等而不想转义能够在用{{&name}}

1 var data = {
2             "name" : "<br>Willy<br>"
3         };
4         var output = Mustache.render("{{&name}} is awesome.", data);
5         console.log(output);

成果:<br>Willy<br> is awesome.

去掉"&"的成果是转义为:&lt;br&gt;Willy&lt;br&gt; is awesome.(默认将"<"和">"转义)

3.若是是对象,还能申明其属性

 1 var data = {
 2             "name" : {
 3                 "first" : "Chen",
 4                 "last" : "Jackson"
 5             },
 6             "age" : 18
 7         };
 8         var output = Mustache.render(
 9                 "name:{{name.first}} {{name.last}},age:{{age}}", data);
10         console.log(output);

成果:name:Chen Jackson,age:18

4.{{#param}}这个标签非常强大,有if断定、forEach的功能。

1 var data = {
2                 "nothin":true
3             };
4             var output = Mustache.render(
5                     "Shown.{{#nothin}}Never shown!{{/nothin}}", data);
6             console.log(output);

若是nothin是空或者null,或者是false都邑输出Shown.相反则是Shown.Never shown!。

5.迭代

 1 var data = {
 2             "stooges" : [ {
 3                 "name" : "Moe"
 4             }, {
 5                 "name" : "Larry"
 6             }, {
 7                 "name" : "Curly"
 8             } ]
 9         };
10         var output = Mustache.render("{{#stooges}}<b>{{name}}</b>{{/stooges}}",
11                 data);
12         console.log(output);

输出:<b>Moe</b>

<b>Larry</b>

<b>Curly</b>

6.若是迭代的是数组,还能够用{{.}}来调换每一个元素

1 var data = {
2             "musketeers" : [ "Athos", "Aramis", "Porthos", "D""Artagnan" ]
3         };
4         var output = Mustache.render("{{#musketeers}}* {{&.}}{{/musketeers}}",
5                 data);
6         console.log(output);

输出:* Athos

* Aramis

* Porthos

* D""Artagnan

7.迭代输出的还可所以一个function返回的成果,function能够读取当前变量的高低文来获取其它属性履行其它操纵

 1 var data = {
 2             "beatles" : [ {
 3                 "firstName" : "John",
 4                 "lastName" : "Lennon"
 5             }, {
 6                 "firstName" : "Paul",
 7                 "lastName" : "McCartney"
 8             }, {
 9                 "firstName" : "George",
10                 "lastName" : "Harrison"
11             }, {
12                 "firstName" : "Ringo",
13                 "lastName" : "Starr"
14             } ],
15             "name" : function() {
16                 return this.firstName + " " + this.lastName;
17             }
18         };
19         var output = Mustache
20                 .render("{{#beatles}} *{{name}}{{/beatles}}", data);
21         console.log(output);

输出: *John Lennon

*Paul McCartney

*George Harrison

*Ringo Starr

8:办法里面能够再履行变量中的表达式

 1 var data = {
 2             "name" : "{{age}}" + "Tater",
 3             "bold" : function() {
 4                 return function(text, render) {
 5                     console.log(text);
 6                     return "<b>" + render(text) + "</b>";
 7                 };
 8             },
 9             "age" : 18
10         };
11         var output = Mustache.render("{{#bold}}Hi {{name}}.{{/bold}}", data);
12         console.log(output);

输出成果:

Hi {{age}}Tater.
<b>Hi 18Tater.</b>

9.{{^}}与{{#}}相反,若是变量是null、undefined、 false、和空数组讲输出成果

10.{{!  }}凝视

原文地址http://www.mysjtu.com/page/M0/S733/733819.html

转载于:https://www.cnblogs.com/zfyouxi/p/3764611.html

Mustache.js语法相关推荐

  1. Mustache.js和Handlebars.js有什么区别?

    本文翻译自:What are the differences between Mustache.js and Handlebars.js? Major differences I've seen ar ...

  2. mustache.js html模板,js模板引擎Mustache将h5模板页面转化为小程序页面

    研究目的 怎么让小程序页面可以通过后台h5模板进行管理 Mustache 简单语法示例 1.{{keyName}} var data = { "name": "zhang ...

  3. js foreach用法_使用 nodejs 写爬虫(一): 常用模块和 js 语法

    本篇是使用 nodejs 写爬虫系列教程的第一篇, 介绍了使用 nodejs 写爬虫过程中常用的模块和一些必须掌握的 js 语法 <!-- more --> 常用模块 常用模块有以下几个: ...

  4. Mustache.js使用笔记(内容属于转载总结)

    1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,"{{}}" Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲 ...

  5. js语法+dom+js图片库+最佳实践+图片库改进版

    [2]js语法 [2.2.4]数据类型 类型1)字符串 var mood = 'happy'; var moood = "happy"; 类型2)数值: var age = 33. ...

  6. 【博学谷学习记录】超强总结,用心分享|js语法基础(一)

    目录 JS 变量 数据类型 关键字和保留字 JS JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言. 作用 表单动态校验 网页特效 服务端开发 桌面程序 App 控制硬件物联 ...

  7. 【 javascript】JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

    JS语法 ES6.ES7.ES8.ES9.ES10.ES11.ES12新特性 前言 ES6(2015) 1. 类(class) 2. 模块化(ES Module) 3. 箭头函数 4. 函数参数默认值 ...

  8. chunk-vendors.js 语法错误

    chunk-vendors.js 语法错误 打开错误文件查看 解决方法 根据上面的错误检查,在vue.config.js中添加transpileDependencies参数配置 transpileDe ...

  9. 123. 精读《用 Babel 创造自定义 JS 语法》

    1 引言 在写这次精读之前,我想谈谈前端精读可以为读者带来哪些价值,以及如何评判这些价值. 前端精读已经写到第 123 篇了,大家已经不必担心它突然停止更新,因为我已养成每周写一篇文章的习惯,而读者也 ...

  10. 视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript

    零基础JS入门系列课程(2)之JS语法基础精讲 螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术 邓老师 ¥59.00 立即订阅 扫码下载「CSDN程序员学院 ...

最新文章

  1. nginx和mysql链接_nginx转发mysql连接
  2. hdu 4888 最大流慢板
  3. java.lang.UnsupportedOperationException 异常分析
  4. Hadoop RPC框架
  5. web响应式图片设计实现
  6. Sharding-JDBC水平分表(最终测试)_Sharding-Sphere,Sharding-JDBC分布式_分库分表工作笔记009
  7. 今日arXiv精选 | Interspeech/KDD/TACL/ICCV/CIKM
  8. C1. Skyscrapers (从easy到hard)
  9. 香港低价linux虚拟主机,
  10. 还想野蛮生长?互联网金融有《意见》了
  11. OpenGL LookAt函数理解
  12. python手机版下载-手机python下载
  13. 飞猪大数据:85后带来春节旅行新气氛
  14. linux 下的文本处理——除去重复行uniq命令
  15. 策略模式——多种发票上传实现案例
  16. 从传统金融变身科技公司后,2017年的平安交了这样一份答卷
  17. 砌下落梅如雪乱——剑雪无名
  18. excel一个表格分成多个
  19. Spring拦截器的切入点定义
  20. 【sbt】sbt package与sbt assembly

热门文章

  1. ajax data传值
  2. linux增加虚拟内存
  3. 更改swing应用程序标题栏默认图标
  4. HDU-4324 Triangle LOVE 拓扑排序
  5. BGPVRP5.0的10条选路原则,以及NE20的IBGP负载均衡
  6. vs2015 中无法链接strcasecmp 和 strncasecmp的解决办法
  7. exec调用oracle,exec 和 call 用法详解
  8. 32G内存oracle内核设置,浅谈安装ORACLE时在Linux上设置内核参数的含义
  9. wine linux 目录,wine的安装与microsoft office在linux上的运行
  10. 软件开发有哪些规范和标准_车辆,机械专业如何从事汽车电子软件开发