//最终效果
<table>
<tr>
<td> value1</td>
<td>123</td>
<td> value2 </td>
<td>456 </td>
</tr>
<tr>
<td> value3</td>
<td> 678 </td>
<td> value4</td>
<td> 789</td>
</tr>
</table>
//代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//自己下包并导入
<script type="text/javascript" src="./template-web.js"></script>
</head>
<body>
<div id="content">
</div>
</body>
<script id="tpl" type='text/template'>
<table>
<tr>
{{each a value key }}
{{if key === 'value1' || key === 'value2'}}
<td>
{{key}}
</td>
<td>
{{value}}
</td>
{{/if}}
{{/each}}
</tr>
<tr>
{{each a value key }}
{{if key === 'value3' || key === 'value4'}}
<td>
{{key}}
</td>
<td>
{{value}}
</td>
{{/if}}
{{/each}}
</tr>
</table>
</script>
<script>
let obj = { a: { value1: "123", value2: 456, value3: "678", value4: "789" } }
let html = template('tpl', obj);
console.log(html);
//是否解析标签 innerHTML：解析 (innerText：不解析)二选一
document.getElementById('content').innerHTML (innerText)= html;
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
