template-web.js模板引擎的使用之初級篇
阿新 • • 發佈：2019-01-05
本次將介紹web前端模板引擎框架之一的template-web.js模板引擎框架的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 引入模板引擎:一般用於在網路請求之後，展示相同的多條資料 --> <script type="text/javascript" src="js/template-web.js"下一篇為template-web.js模板引擎框架的使用的高階篇></script> <!--定義模板--> <script type="text/html" id="personTemplate"> <ul> <li>姓名{{name}}</li> <li>性別{{sex}}</li> <li>年齡{{age}}</li> </ul> </script> <script type="text/javascript"> //定義資料 var personData = { name:"劉強", sex:"男", age:23 }; /** * 利用模板引擎 引用資料填充到模板中 * * 引數一：模板id * 引數二：資料 */ var result = template("personTemplate",personData); //將返回的模板結果新增到介面中 document.body.innerHTML = result; </script> </body> </html>