1、先来了解一下template模板
<!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>
`
})
</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>