模板引擎 art-template 的基本使用

最新推荐文章于 2024-08-10 07:07:55 发布

小豪boy

最新推荐文章于 2024-08-10 07:07:55 发布

阅读量342

点赞数

分类专栏：前端学习笔记 Webpack的应用 JavaScript学习笔记文章标签： java

本文链接：https://blog.csdn.net/qq_34771938/article/details/120657775

版权

JavaScript学习笔记同时被 3 个专栏收录

40 篇文章 2 订阅

订阅专栏

前端学习笔记

35 篇文章 1 订阅

订阅专栏

Webpack的应用

9 篇文章 0 订阅

订阅专栏

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>