ajax-模板语法/05-template方法参数解读

最新推荐文章于 2021-09-23 11:29:35 发布

喵帕斯_喵太

最新推荐文章于 2021-09-23 11:29:35 发布

阅读量194

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/117200104

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

01-模板语法-{{}}

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 1. 引入 art-template -->
    <script src="./libs/template-web.js"></script>
  </head>
  <body>
    <!-- 2. 定义模板 -->
    <script type="text/html" id="a1">
      <!-- 支持读取对象属性 -->
      <h2>{{ user.name }}</h2>
      <h2>{{ user['name'] }}</h2>
      <!-- 支持数学运算 -->
      <h3>支持运算：{{ 1+1 }}</h3>
      <!-- 支持三元表达式 -->
      <div class="{{ isActive ? 'active': '' }}">支持三元表达式</div>
      <!-- 短路运算实现默认占位图片 -->
      <img src="{{ imgSrc || './img/mi_placeholder.png' }}" alt="">
      <!-- 支持 JS 方法调用 -->
      <div>调用JS方法提取姓名的首字：{{ username.slice(0,1) }}</div>
    </script>
    <script>
      // 3. 定义数据(一般通过ajax获取)
      // const res = { user: { name: '这是个标题' } }
      // 4. 调用模板    template(模板id, { })
      const htmlStr = template('a1', { user: { name: '这是个标题' }, isActive: true , imgSrc:'', username: '周杰伦' })
      console.log(htmlStr)
    </script>
  </body>
</html>

02-模板语法-条件输出

  <body>
    <!-- 模板条件输出应用场景： 页面结构分情况展示(如：没有数据展示空状态) -->
    <script type="text/html" id="art">
      {{ if list.length === 0 }}
      <h2>没有更多英雄的提示</h2>
      {{ /if }}
    </script>
    <script>
      const htmlStr = template('art', { list: [{}] })
      console.log(htmlStr)
    </script>
  </body>

03-模板语法-循环输出-自定义名

  <body>
    <!-- 2. 定义模板 -->
    <script type="text/html" id="art">
      {{ each list v i}}
      <li>
        <h2>英雄名称：{{ v.name }}</h2>
        <h3>年龄：{{ v.age }}</h3>
        <h4>数组下标：{{ i }}</h4>
      </li>
      {{ /each }}
    </script>
    <script>
      // 2. 准备数据
      const res = [
        { id: 11, name: '刘备', age: 18 },
        { id: 22, name: '关羽', age: 19 },
        { id: 33, name: '张飞', age: 20 },
      ]
      
      // 3. 调用模板，得到处理后的 html 字符串
      //    template('id名称', { 模板内部使用变量名: 数据 })
      const htmlStr = template('art', { list: res })
      console.log(htmlStr)
    </script>
  </body>

04-template方法参数解读

  <body>
    <!-- 2. 定义模板 -->
    <script type="text/html" id="art">
      {{ each list }}
      <li>
        <h2>英雄名称：{{ $value.name }}</h2>
        <h3>年龄：{{ $value.age }}</h3>
        <h4>数组下标：{{ $index }}</h4>
      </li>
      {{ /each }}
    </script>
    <script>
      // 3. 调用模板，得到处理后的 html 字符串
      const res = [
        { id: 11, name: '刘备', age: 18 },
        { id: 22, name: '关羽', age: 19 },
        { id: 33, name: '张飞', age: 20 },
      ]
      
      //    template('id名称', { 模板内部使用变量名: 数据 })
      const htmlStr = template('art', { list: res })
      console.log(htmlStr)
    </script>
  </body>

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax-模板语法/05-template方法参数解读

01-模板语法-{{}}<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&
复制链接

扫一扫