模板引擎 art-template 的基本使用-优快云博客

本文介绍了如何在网页中利用art-template模板引擎来渲染一组学生信息，包括姓名、年龄和性别。通过简单的步骤展示了引入库、准备模板、获取数据并插入DOM的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 引入 art-template

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

2. 准备好模板

<script id="tpl-students" type="text/html">
  {{each students}}
    <li>{{$value.name}}--{{$value.age}}--{{$value.sex}}</li>
  {{/each}}
</script>

3. 获取模板

const tplData = template('tpl-students',{
  // students:students
  students
});

4. 将模板内容插入到DOM元素中

const list = document.getElementById('list');
list.innerHTML = tplData;

5. 完整示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>模板引擎 art-template 的基本使用</title>
</head>

<body>
  <p>学生信息表</p>
  <ul id="list"></ul>

  <!-- 1.引入 art-template -->
  <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

  <!-- 2.准备好模板 -->
  <script id="tpl-students" type="text/html">
    {{each students}}
      <li>{{$value.name}}--{{$value.age}}--{{$value.sex}}</li>
    {{/each}}
  </script>

  <script>
    // 学生数据
    const students = [
        {
          name: 'Alex',
          age: 18,
          sex: 'male'
        },
        {
          name: '张三',
          age: 28,
          sex: 'male'
        },
        {
          name: '李四',
          age: 20,
          sex: 'female'
        }
      ];

      // 3.获取模板
      const tplData = template('tpl-students',{
        // students:students
        students
      });

      // 4.将模板引擎输出的字符串，传递给DOM元素的innerHTML属性
      const list = document.getElementById('list');
      list.innerHTML = tplData;

      console.log(tplData);
  </script>
</body>

</html>