Ajax - 模板引擎方法 - ＜script type=“text/template“ id=“Temp“＞

最新推荐文章于 2022-11-14 08:36:55 发布

Henry_ww

最新推荐文章于 2022-11-14 08:36:55 发布

阅读量340

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.youkuaiyun.com/Henry_ID/article/details/120135401

版权

前端专栏收录该内容

19 篇文章

订阅专栏

这篇博客介绍了如何使用模板引擎来动态生成HTML内容。通过创建一个JavaScript对象，定义了包含姓名、性别、年龄和爱好的数据，然后利用`<script type=text/template>`标签构建模板结构。模板引擎方法（template）被调用，传入模板ID和数据对象，生成的HTML片段插入到页面的`<ul>`元素中。示例中展示了如何在模板中使用数据对象的属性、方法以及逻辑表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
    <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>模板引擎方法</title>
    </head>
    <!-- 👉 1. 引入模板js文件 -->
    <script src="./libs/template-web.js"></script>
    <body>
        <ul></ul>

        <!-- 创建模板结构：我们只是需要参照这个结构，但是并不需要浏览器以html语法来解析这个结构 -->
        <!-- script标签有一个默认的type='text/javascript',它的作用就是告诉浏览器里面的内容是js代码，所以要以js语法进行解析 -->
        <!-- 在浏览器，有一个专门的type='text/template'，就是用来描述模板结构的 -->
        <!-- 在模板中，可以使用你传入的数据对象的属性，模板内部会根据属性名称找到对应的值来使用 -->

        <!-- 你得指定在某个结构中你想显示的数据对象的属性名称 -->
        <!-- obj.obi.name -->

        <!--👉 2.创建模板引擎结构 -->
        <script type="text/template" id="textTemp">
            <li>{{name}}</li>
            <li>{{gender}}</li>
            <li>{{age}}</li>
            <li>{{hobby.one}}</li>
            <li>{{hobby['two']}}</li>

            <!-- 转大写 -->
            <li>{{name.toUpperCase()}}</li>
            <!-- 运算 -->
            <li>{{age + 10}}</li>
            <!-- 三元表达式 -->
            <li>{{age>=18?'成年':'未成年'}}</li>
            <!-- 拼接字符串 -->
            <li>{{'我的性别是' + gender }}</li>
            <!-- 逻辑运算 -->
            <li>{{area || '中国'}}</li>
        </script>
    </body>

    <script>
        // 👉 3.定义对象,保存模板配套数据
        let obj = {
            name: 'jack',
            gender: '男',
            age: 19,
            area: '',
            hobby: {
                one: '打球',
                two: '游泳',
            },
        };

        // 👉 4.调用模板引擎方法.   传入模板id和数据，返回生成动态结构
        // 🔔🔔 : template(模板id,数据对象)
        let html = template('textTemp', obj);
        document.querySelector('ul').innerHTML = html;
    </script>
</html>