前端模板引擎template之如何实现if-else、遍历

1、先来了解一下template模板

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div id="app"></div><!--第2步：定义模块-->
<!--模板中就可以使用数据-->
<!--type="text/javascript"  表示script标签中只能写JS代码-->
<!--type="text/html" 表示在script标签中写html代码-->
<!-- 如果说，你在script标签中写html代码，整个script标签叫模板-->
<!--模板并不会直接在页面上渲染出来-->
<script type="text/html" id="my"><!--在模板中使用if else--><ul>{{each news}}<li><h3>{{ $value.title }}</h3><p>{{ $value.summary }}</p></li>{{/each}}</ul>
</script><!--第1步：导入模板引擎JS文件-->
<script src="../public/template-web.js"></script><script>let data = {// 模拟通过ajax获取的数据news:[{id:1,title:"新闻标题1",summary:"新闻的描述1"},{id:2,title:"新闻标题2",summary:"新闻的描述2"},{id:3,title:"新闻标题3",summary:"新闻的描述3"},{id:4,title:"新闻标题4",summary:"新闻的描述4"},{id:5,title:"新闻标题5",summary:"新闻的描述5"}]}/* 第1个参数是指定模板  template("my",data) 把模板和数据进行柔和*/let htmlStr = template("my",data)document.getElementById("app").innerHTML = htmlStr;let str = ``;data.news.forEach(item=>{str += `<li><h3>${ item.title }</h3><p>${ item.summary }</p></li>`})
</script>
</body>
</html>

2、如何在模板中实现if-else

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div id="app"></div><!--模板中就可以使用数据-->
<script type="text/html" id="my"><!--在模板中使用if else--><ul>{{if score>=60}}<li>及格</li>{{else}}<li>不及格</li>{{/if}}</ul>
</script><script src="../public/template-web.js"></script>
<script>let data = {score:89}let htmlStr = template("my",data)document.getElementById("app").innerHTML = htmlStr;
</script>
</body>
</html>

3、如何在模板中实现遍历

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div id="app"></div><!--模板中就可以使用数据-->
<script type="text/html" id="my"><!--在模板中使用if else--><ul>{{each news}}<li><h3>{{ $value.title }}</h3><p>{{ $value.summary }}</p></li>{{/each}}</ul>
</script><script src="../public/template-web.js"></script>
<script>let data = {news:[{id:1,title:"新闻标题1",summary:"新闻的描述1"},{id:2,title:"新闻标题2",summary:"新闻的描述2"},{id:3,title:"新闻标题3",summary:"新闻的描述3"},{id:4,title:"新闻标题4",summary:"新闻的描述4"},{id:5,title:"新闻标题5",summary:"新闻的描述5"}]}let htmlStr = template("my",data)document.getElementById("app").innerHTML = htmlStr;let str = ``;data.news.forEach(item=>{str += `<li><h3>${ item.title }</h3><p>${ item.summary }</p></li>`})console.log(str)
</script>
</body>
</html>

4、如何在template中使用@解析html代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div id="app"></div><!--模板中就可以使用数据-->
<script type="text/html" id="my"><ul><li>{{ res }}</li><!-- 如果想解析html代码，可以使用@ --><li>{{@ res }}</li></ul>
</script><script src="../public/template-web.js"></script>
<script>let data = {res:"<strong>hello 模板引擎</strong>"}let htmlStr = template("my",data)document.getElementById("app").innerHTML = htmlStr;
</script>
</body>
</html>

前端模板引擎template之如何实现if-else、遍历相关推荐

html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
java 前端模板_前端模板引擎入门
模板引擎模板引擎起到数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
前端模板引擎 artTemplate的使用与进阶
前端模板引擎 artTemplate的使用与进阶查看全文 http://www.taodudu.cc/news/show-3760040.html 相关文章: springboot 整合 free ...
art-template前端模板引擎
目录内容介绍一.使用方法二.主要API 1.原文输出 2.逻辑判断 3.循环语句三.代码四.页面显示五.其他 1.pre标签 2.code标签内容介绍今天我们要了解的是一款高性能的 ...
前端模板引擎——handlebars
目录一.代码二.页面显示一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...
swig模板 PHP,nodejs前端模板引擎swig入门
相对于jade,我还是更喜欢swig前端模板引擎,jade虽然语法简练高效了不少,但是在我这最大的问题是他没有一个html该有的样子... 所以我还是决定使用swig,页面结构,样子都是熟悉的样子, ...
swig模板 PHP,如何使用nodejs前端模板引擎swig
这次给大家带来如何使用nodejs前端模板引擎swig,使用nodejs前端模板引擎swig的注意事项有哪些,下面就是实战案例,一起来看一下. 相对于jade,我还是更喜欢swig前端模板引擎,jad ...
js模板引擎Template.js使用详解及免费下载template.js
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
JavaScript模板引擎Template.js使用
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...

前端模板引擎template之如何实现if-else、遍历

1、先来了解一下template模板

2、如何在模板中实现if-else

3、如何在模板中实现遍历

4、如何在template中使用@解析html代码

前端模板引擎template之如何实现if-else、遍历相关推荐

最新文章

热门文章