art-template
<body>
<!-- 1.定义模板 -->
<script type="text/template" id="sub">
<!-- 需要注意的是{{@代表解析html标签,name代表对象名}}如果不加@则不解析html标签 -->
<h1>我叫{{@name}},今年{{age}}岁了</h1>
</script>
<script>
// 2.定义数据
let data = {
name: '<span>刘宇阳</span>',
age: 19,
arr:[1,2,3,'阳阳'],
obj:new Date()
}
// 3.调用template函数
let str = template('sub',data);
// 4.渲染html结构
document.body.innerHTML = str;
</script>
</body>
需要注意的是
不加@默认都是字符串,不管什么数据类型。值是什么就渲染输出什么
{{arr}} //[1,2,3,'阳阳'] {{obj}} //"2022-03-28T07:51:23.439Z"
定义模板{{name}}的name是定义数据中的对象名字,如果加@则解析html标签,反之则不解析。
// 不加@ {{name}} //<span>刘宇阳</span> // 加@ {{name}} //刘宇阳