Template模板和``字符串木板的使用

最新推荐文章于 2024-04-28 11:51:43 发布

wang-xiaoze

最新推荐文章于 2024-04-28 11:51:43 发布

阅读量718

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43129000/article/details/91445231

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Template模板：

template.js是渲染html的一种模板结构方式，

<script>

    var demoId=document.getElementById("demo").innerHTML;
    template(demoId,data{})

    //直接将获取到的domeId放置template参数，即第二个参数data为数据类型
    var data={
        items:[
            {'name':'name','val':'user'},
            ]
        }
    template(document.getElementById('demo').innerHTML,data)
</script>

以上内容为template的原理，这样会让大家更加理解template模板的使用，接下来我会以一个例子深入理解templat模板：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 放置模板内容的合资   id=wp -->
		<div id="wp"></div>
		<!-- 定义模板  type类型为type="text/html" -->
		<!-- 需要注意的是  在template中  用<%开始 和 %> 结束-->
		<script id="tpl" type="text/html">
			<ul>
       <%for(var i in items){%>   
       <li>
        name:<%=items[i].name%>val:<%=items[i].val%>
    </li>
    <%}%>
</ul>
</script>
		<script src="js/template.js"></script>
		<script>
			var data = {
				items: [{
						'name': '张三',
						'val': '19'
					},
					{
						'name': '李四',
						'val': '21'
					},
					{
						'name': '王五',
						'val': '28'
					},
				]
			}
			var html = template(document.getElementById('tpl').innerHTML, data);
			console.log(html)
			document.getElementById('wp').innerHTML = html;
		</script>
	</body>
</html>

效果如下：

template

``字符串模板：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				width: 300px;
				text-align: center;
			}

			table tr td {
				padding: 2px;
				height: 28px;
				line-height: 28px;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<tbody>

			</tbody>
		</table>
	</body>
	<script type="text/javascript">
		var tbody = document.querySelector("tbody");
		console.log(tbody);
		var str = ``;
		for (let i = 0; i < 2; i++) {
			str += `
				<tr>
					<td></td>
					<td></td>
				</tr>
			`;
		}
		tbody.innerHTML = str
		var td=document.getElementsByTagName("td")[0];
		td.innerHTML="张三"
		var td1=document.getElementsByTagName("td")[1];
		td1.innerHTML="19"
	</script>
</html>

字符串模板=较为简单！！

wang-xiaoze

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Template模板和``字符串木板的使用

Template模板：template.js是渲染html的一种模板结构方式，<script> var demoId=document.getElementById("demo").innerHTML; template(demoId,data{}) //直接将获取到的domeId放置template参数，即第二个参数data为数据类型 ...
复制链接

扫一扫