引用script
<script src="baiduTemplate.js" charset="UTF-8">
</script>
模板語法
<script id="header" type="text/html">
<h1>姓名:<%=name%></h1>
<h1>年齡:<%=age%></h1>
<ul>
<%for(var i=0;i<foods.length;i++){%>
<li><%=foods[i]%></li>
<%}%>
</ul>
</script>
直接寫html代碼,如果需要加js代碼則需要用<% js代碼 %>
若是變量則<%= 變量%>
然后在下面正常寫js代碼
<script>
var data={
name:'xiaoming',
age:13.5,
foods:['蒸羊羔','蒸熊掌','一盆米飯我夠了']
};
// 生成html片段
var html=baidu.template('header',data);
console.log(html);
</script>
拓展: artTemplate
artTemplate有兩種語法指煎,所以就有兩個庫,
一種是簡潔語法便斥,一種是原生語法,引用方法類似于baidu.Template,但是性能優(yōu)于baidu.Template至壤;
- 簡潔語法
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引{{i+1}}:{{value}}</li>
{{/each}}
</ul>
用each方法循環(huán)
- 原生語法
類似于baidu.Template;
<h1><%=title%></h1>
<ul>
<%for(var a of item){%>
<li><%=a%></li>
<%}%>
</ul>