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>
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>
const res = [
{ id: 11, name: '刘备', age: 18 },
{ id: 22, name: '关羽', age: 19 },
{ id: 33, name: '张飞', age: 20 },
]
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>
const res = [
{ id: 11, name: '刘备', age: 18 },
{ id: 22, name: '关羽', age: 19 },
{ id: 33, name: '张飞', age: 20 },
]
const htmlStr = template('art', { list: res })
console.log(htmlStr)
</script>
</body>