art-template注意点

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> 

需要注意的是

  1. 不加@默认都是字符串,不管什么数据类型。值是什么就渲染输出什么

    {{arr}} //[1,2,3,'阳阳']
    {{obj}} //"2022-03-28T07:51:23.439Z"
  1. 定义模板{{name}}的name是定义数据中的对象名字,如果加@则解析html标签,反之则不解析。

    // 不加@
    {{name}} //<span>刘宇阳</span>
    
    // 加@
    {{name}} //刘宇阳
无标签
评论区
头像