Mustache.js语法
看了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.
去掉"&"的成果是转义为:<br>Willy<br> 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);
输出成果:
9.{{^}}与{{#}}相反,若是变量是null、undefined、
false、和空数组讲输出成果
10.{{! }}凝视
原文地址http://www.mysjtu.com/page/M0/S733/733819.html
转载于:https://www.cnblogs.com/zfyouxi/p/3764611.html
Mustache.js语法相关推荐
- Mustache.js和Handlebars.js有什么区别?
本文翻译自:What are the differences between Mustache.js and Handlebars.js? Major differences I've seen ar ...
- mustache.js html模板,js模板引擎Mustache将h5模板页面转化为小程序页面
研究目的 怎么让小程序页面可以通过后台h5模板进行管理 Mustache 简单语法示例 1.{{keyName}} var data = { "name": "zhang ...
- js foreach用法_使用 nodejs 写爬虫(一): 常用模块和 js 语法
本篇是使用 nodejs 写爬虫系列教程的第一篇, 介绍了使用 nodejs 写爬虫过程中常用的模块和一些必须掌握的 js 语法 <!-- more --> 常用模块 常用模块有以下几个: ...
- Mustache.js使用笔记(内容属于转载总结)
1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,"{{}}" Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲 ...
- js语法+dom+js图片库+最佳实践+图片库改进版
[2]js语法 [2.2.4]数据类型 类型1)字符串 var mood = 'happy'; var moood = "happy"; 类型2)数值: var age = 33. ...
- 【博学谷学习记录】超强总结,用心分享|js语法基础(一)
目录 JS 变量 数据类型 关键字和保留字 JS JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言. 作用 表单动态校验 网页特效 服务端开发 桌面程序 App 控制硬件物联 ...
- 【 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. 函数参数默认值 ...
- chunk-vendors.js 语法错误
chunk-vendors.js 语法错误 打开错误文件查看 解决方法 根据上面的错误检查,在vue.config.js中添加transpileDependencies参数配置 transpileDe ...
- 123. 精读《用 Babel 创造自定义 JS 语法》
1 引言 在写这次精读之前,我想谈谈前端精读可以为读者带来哪些价值,以及如何评判这些价值. 前端精读已经写到第 123 篇了,大家已经不必担心它突然停止更新,因为我已养成每周写一篇文章的习惯,而读者也 ...
- 视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript
零基础JS入门系列课程(2)之JS语法基础精讲 螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术 邓老师 ¥59.00 立即订阅 扫码下载「CSDN程序员学院 ...
最新文章
- nginx和mysql链接_nginx转发mysql连接
- hdu 4888 最大流慢板
- java.lang.UnsupportedOperationException 异常分析
- Hadoop RPC框架
- web响应式图片设计实现
- Sharding-JDBC水平分表(最终测试)_Sharding-Sphere,Sharding-JDBC分布式_分库分表工作笔记009
- 今日arXiv精选 | Interspeech/KDD/TACL/ICCV/CIKM
- C1. Skyscrapers (从easy到hard)
- 香港低价linux虚拟主机,
- 还想野蛮生长?互联网金融有《意见》了
- OpenGL LookAt函数理解
- python手机版下载-手机python下载
- 飞猪大数据:85后带来春节旅行新气氛
- linux 下的文本处理——除去重复行uniq命令
- 策略模式——多种发票上传实现案例
- 从传统金融变身科技公司后,2017年的平安交了这样一份答卷
- 砌下落梅如雪乱——剑雪无名
- excel一个表格分成多个
- Spring拦截器的切入点定义
- 【sbt】sbt package与sbt assembly
热门文章
- ajax data传值
- linux增加虚拟内存
- 更改swing应用程序标题栏默认图标
- HDU-4324 Triangle LOVE 拓扑排序
- BGPVRP5.0的10条选路原则,以及NE20的IBGP负载均衡
- vs2015 中无法链接strcasecmp 和 strncasecmp的解决办法
- exec调用oracle,exec 和 call 用法详解
- 32G内存oracle内核设置,浅谈安装ORACLE时在Linux上设置内核参数的含义
- wine linux 目录,wine的安装与microsoft office在linux上的运行
- 软件开发有哪些规范和标准_车辆,机械专业如何从事汽车电子软件开发