Mustache的使用 | 易学教程

Mustache的简介
Mustache是一个轻逻辑的模板引擎，它是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的HTML文档
Mustache的基本用法
首先需要导入mustache.js文件
mustache渲染形式单一

var html=mustache.render(teamp,data)

teamp是一个模板的html,代码如下：

var teamp=
               '<select id="subject" name="subject">'+
               '{{#list}}'+
               '<option>'+
               ' {{name}}'+
               '</option>' +
               '{{/list}}'+
               '</select>'+
               '<select  id="course" name="course">'+
               '{{#list}}'+
               '<option>'+
               ' {{subject}}'+
               '</option>' +
               '{{/list}}'+
               '</select>'+
               '<div class="btn2">111111</div>'

data是一个数据源对象，样例如下：

var data={list:[{name:"计算机",subject:["计算机软件","计算机应用技术","计算机科学与技术"]},{name:"化学工程与技术",subject:["化学工程","化学工艺"]},{name:"电子科学与技术",subject:["物理电子学","电路与系统"]}]};

mustache标签介绍
1）{{variable}}变量

 var data={"name":{"first":"zhangwei","last":"yuting"},"age":22}
 var show={{name.first}} {{name.last}} {{age}}

输出为：zhangwei,yuting,22
2){{{prop}}} 带有HTML的变量
{{prop}}中的html会直接转义
如果属性是加粗的话，显示的时候直接解析带有样式的值
3）{{#prop}}{{/prop}}用于遍历参数
4）{{^prop}} {{/prop}}用于遍历参数，不同于{{#prop}}{{/prop}}当prop为null,undefined,甚至json数据里没有这个prop字段时会显示
5）{{.}}用于枚举数组

来源：CSDN

作者：Love With You

链接：https://blog.csdn.net/weixin_45513470/article/details/103492570

标签

mustache

电脑