模板引擎

最新推荐文章于 2022-02-27 23:13:24 发布

qq_42438026

最新推荐文章于 2022-02-27 23:13:24 发布

阅读量73

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_42438026/article/details/107323644

版权

模版引擎

1.ES5之前拼接的字符串

1.拼接太麻烦需要多次分割不便于维护

2.所有拼接的字符串只有一行显示太长

3.模板字符串所有的内容写在反引号(``)里面然后变量放在${}里面

document.querySelector("p").innerHTML = "我叫" + stu.name + "，我今年" + stu.age + "岁了，我住在" + stu.place + "，今年上" + stu.grade + "年级";

function age(num){
   return num - 1;
}
document.querySelector("p").innerHTML = `我叫${stu.name},我今年${age(stu.age)}岁了，我住在${stu.place}，今年上${stu.grade - 1}年级`;

2.模板引擎

1.模板引擎使用步骤：

a.导入模板引擎

b.准备一个模板

1.准备模板必须要是用script 模板引擎规定的只能使用script

2.必须要给他一个id 在调用的时候使用

3.必须有type属性而且type属性绝对绝对不能是text/javascript

c.调用方法生成html结构

a.挖坑的时候一定要注意坑的名字一定要和对象的属性名一致

b.type的值只要不是text/javascript就可以但是建议使用text/html 因为其他的没办法识别标签

c.<%= %>是一个完整的结构

3.模板引擎的内部循环

<script src="template-web.js"></script>
<script type="text/html" id="tpl">
    <% for(var i=0;i<list.length;i++){ %>
        <h1>自我介绍</h1>
        <p>大家好，我叫<%= list[i].name%>,我今年<% if(list[i].age > 18){ %>
            <u>成年</u>
        <% }else{ %>
            <u>未成年</u>
        <% } %>岁</p>
    <% } %>
</script>
<script>
    var arr =[
        {
            name : "1",
            age : 18
        },
        {
            name : "2",
            age : 18
        },
        {
            name : "3",
            age : 18
        },
        {
            name : "4",
            age : 18
        },
    ];
        
    var html = "";
    // for(var i=0;i<arr.length;i++){
    //     html += template("tql",arr[i]);
    // }
    html += template("tpl",{list : arr});
    console.log(html);
    document.body.innerHTML = html;
</script>

4.模板引擎的简易写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input{
            width: 120px;
            height: 70px;
            margin: 50px auto;
            display: block;
        }
        table{
            margin: 0px auto;
            /* table的样式，其他地方不能用 */
            /* 合并单元格的边框 */
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid #000;
            width: 120px;
            height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="button" value="加载数据" id="load">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>
</body>
</html>
<script src="template-web.js"></script>
<script type="text/html" id="sql">
    {{ each arr value }}
        <tr>
            <td>{{ value.Id }}</td>
            <td>{{ value.name }}</td>
            <!-- <td>{{ value.age }}</td> -->
            {{ if value.age >= 18 }}
                <td>成年</td>
            {{ else }}
                <td>未成年</td>
            {{ /if }}
            <td>{{ value.score }}</td>
        </tr>
    {{ /each }}
</script>
<script>
    var arr = [
        {Id : 0, name : "张三", age : 18, score : 68},
        {Id : 1, name : "王亚", age : 28, score : 55},
        {Id : 2, name : "李辉", age : 16, score : 70},
        {Id : 3, name : "秦虹", age : 18, score : 50},
        {Id : 4, name : "海庆", age : 19, score : 76},
        {Id : 5, name : "蛋娃", age : 14, score : 27},
    ]
    document.getElementById("load").onclick = function(){
        document.getElementById("tb").innerHTML = template("sql" , {arr : arr});
    }
 </script>

qq_42438026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模板引擎

模版引擎1.ES5之前拼接的字符串 1.拼接太麻烦需要多次分割不便于维护 2.所有拼接的字符串只有一行显示太长 3.模板字符串所有的内容写在反引号(``)里面然后变量放在${}里面document.querySelector("p").innerHTML = "我叫" + stu.name + "，我今年" + stu.age + "岁了，我住在" + stu.place + "，今年上" + stu.grade + "年级";function age(num){ retu
复制链接

扫一扫