art-template模板引擎(ajax)

art-template

是一个简约、超快的模板引擎。中文官网首页为 http://aui.github.io/art-template/zh-cn/index.html

art-template的使用步骤

1. 导入 art-template
2. 定义数据
3. 定义模板
4. 调用 template 函数
5. 渲染HTML结构

art-template 提供了 {{ }} 这种语法格式，在 {{ }} 内可以进行变量输出，或循环数组等操作

<!-- 1.引入模板 -->
    <script src="./libs/template-web.js"></script>
    <!-- 2.定义模板 -->
    <script type="text/html" id="temp">
      {{if use}}
      <h2>{{use.name}}</h2>
      {{/if}}
    </script>

    <script>
      //   3.获取/定义 数据
      const res = { use: { name: '我是富有的' } };
      //   4.调用模板
      const htmlS = template('temp', res);
      console.log(htmlS);
    </script>

条件输出

{{if value}} 按需输出的内容 {{/if}}
{{if v1}} 按需输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

循环输出

{{each arr}}
    {{$index}} {{$value}}
{{/each}}

过滤器

过滤器语法类似管道操作符, {{value | filterName}}