模板引擎---template的简单使用

（1）art-template的实现步骤

（1）导入template（2）定义数据（3）定义模板（4）调用template（5）渲染HTML结构

（2）模板引擎的语法

template（'模板的Id',需要渲染的数据对象）

（3）其简单的使用

    <div class="box"></div>
--------------------------------------------------------------<script type="text/html" id="user"><h1>{{name}}--------------{{age}}</h1></script>
--------------------------------------------------------------<script>//（1） 定义数据let data = {name: 'zs',age: 12}//（3）调用templatelet userhtml = template('user', data)console.log(userhtml);//（5）渲染到页面$('.wocao').html(userhtml)</script>

（4）模板语法---简单条件输出

实现条件输出，可以使用大胡子{{}}中包裹   if  …… else if ……  else语法代码的实现<div class="box"> </div><!-- ---------------------------------------- --><script type="text/html" id="user">{{if flag === 1}}这是1{{else if flag===2}}这是2{{/if}}</script><!-- ------------------------------------------ --><script>let data = {flag: 2}//（3）调用templatelet userhtml = template('user', data)console.log(userhtml);//（5）渲染到页面$('.wocao').html(userhtml)</script>

（5）模板语法---循环输出

语法（1）当要循环时，可以在{{}}内，通过each进行循环（2）使用 $index 来遍历索引， $value来遍历当前的值用法<div class="box"></div><!-- ---------------------------------------- --><script type="text/html" id="user"><ul>{{each hobby}}<li>索引号：{{$index}}----------内容是：{{$value}}</li>{{/each}}</ul></script><!-- ------------------------------------------ --><script>let data = {flag: 2,hobby: ['吃饭', '睡觉', '刷抖音', '写代码']}let userhtml = template('user', data)console.log(userhtml);$('.wocao').html(userhtml)</script>

（6）就到这里吧~~~，感谢！

模板引擎---template的简单使用相关推荐

js模板引擎Template.js使用详解及免费下载template.js
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
JavaScript模板引擎Template.js使用
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...
JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
beetl java例子_初识Java模板引擎Beetl之简单示例
以前没用过模板引擎,没去关注过,今天正好看到,简单看了一下,写个简单的示例,记录一下: 首先,Beetl 是 Bee Template language的缩写,是新一代的模板引擎,它功能强大,拥有主流 ...
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https:// ...
高性能JavaScript模板引擎template.js原理解析
点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...
php 简单模板引擎,PHP 实现简单的模板引擎
模板引擎作为视图层和模型曾分离的一种解决方案. 首先我们新建一个Template.class.php 的文件 '.m', //设置模板文件'templateDir' => 'template/' ...
模板引擎ejs与html,后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...

模板引擎---template的简单使用

模板引擎---template的简单使用相关推荐

最新文章

热门文章