template-native.js模板渲染資料並根據條件渲染
阿新 • • 發佈：2018-12-03
模板的用法
先看幾個語法，反正我是跟看不清，多謝幾層條件感覺要瘋
迴圈<% for(var i = 0; i < target.length; i++){ %><% } %>
顯示<%=target[i].欄位%>
條件<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
直接看程式碼結構
<!DOCTYPE html>
<html 一個練習，多練習幾個就看得清楚這些括號
*在給定的一組array中，要求顯示人物姓名（name），
門派(juese)，武功(wugong)，修煉(xiulian)大於等於60的顯示登峰造極，修煉小於60的顯示非比尋常，
而欄位為ispaly背景顏色為#ee5600；*
直接上程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href=""/>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/template-native.js" type="text/javascript" charset="utf-8"></script>
<style>
.cade{
width: auto;
height:500px;
margin: 0 auto;
}
.cade ul li{
list-style: none;
width: 100%;
height: 30px;
background: aliceblue;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<p>
template-native.js
</p>
<div class="cade">
<ul id='main'>
</ul>
</div>
<script type="text/html" id='box1'>
<% for(var i = 0; i < data.length; i++){ %>
<% if (data[i].ispaly==0) { %>
<li style="background: #b1decd6b;">
<span>人物：<%=data[i].name%></span>|
<span>角色：<%=data[i].juese%></span>|
<span>武功：<%=data[i].wugong%></span>|
<% if (data[i].xiulian>=60) { %>
<strong style="color: green;">修煉：登峰造極</strong>
<% } else if (data[i].xiulian<60) { %>
<strong style="color: #ee5600;">修煉：非比尋常</strong>
<% } %>
</li>
<% } else if (data[i].ispaly==1) { %>
<li>
<span>人物：<%=data[i].name%></span>|
<span>角色：<%=data[i].juese%></span>|
<span>武功：<%=data[i].wugong%></span>|
<% if (data[i].xiulian>60) { %>
<strong style="color: green;">修煉：登峰造極</strong>
<% } else if (data[i].xiulian<60) { %>
<strong style="color: #ee5600;">修煉：非比尋常</strong>
<% } %>
</li>
<% } %>
<% } %>
</script>
</body>
<script type="text/javascript">
var data ={
"code": 200,
"msg": "成功!",
"data": [{
"name": "風中追風",
"juese":"天山",
"wugong": "生死符",
"xiulian": 60,
"ispaly": 0,
}, {
"name": "零零帥",
"juese":"武當",
"wugong": "仙天功",
"xiulian": 58,
"ispaly": 1,
} ,{
"name": "王大媽",
"juese":"明教",
"wugong": "九陽天書",
"xiulian": 80,
"ispaly": 0,
},{
"name": "笑我狂",
"juese":"少林",
"wugong": "易筋經",
"xiulian": 40,
"ispaly": 1,
},{
"name": "蠍尾針",
"juese":"新宿",
"wugong": "化功大法",
"xiulian": 80,
"ispaly": 1,
}]
}
var html = template('box1', data);
document.getElementById('main').innerHTML = html;
</script>
</html>
案例圖片如下
