0
点赞
收藏
分享

微信扫一扫

ajax模板引擎

驚鴻飛雪 2022-04-07 阅读 131
<!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>Document</title>
    <script src="jquery.js"></script>
</head>

<body>
    <div class="box" style="width:400px;height:400px;border:1px solid grey">
        <div class="title"></div>
        <div>姓名:<span class="name"></span></div>
        <div>年龄:<span class="age"></span></div>
        <div>会员:<span class="isVip"></span></div>
        <div>注册时间:<span class="regTime"></span></div>
        <div>爱好:
            <ul>

            </ul>
        </div>
    </div>
    <script>
        $(function() {
            var data = {
                title: '<h3>用户信息</h3>',
                name: 'zs',
                age: 20,
                isVIP: true,
                regTime: new Date(),
                hobby: ['吃饭', '睡觉', '打豆豆']
            }
            $.each(data, function(i, item) { //i:属性名,item:属性值
                console.log(item);
                if (i == 'title') {
                    $('.title').append(item)
                }
                if (i == 'hobby') {
                    console.log(item[0]);
                    for (i = 0; i < item.length; i++) {
                        $('ul').append('<li>' + item[i] + '</li>')
                    }
                }
            })
            $('.name').html(data.name)
            $('.age').html(data.age)
            if (data.isVIP == true) {
                $('.isVip').html('是')
            }
            $('.regTime').html(data.regTime)
        })
    </script>
</body>

</html>

 

 

 

<!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>Document</title>
    <!-- 只要导入这个模板引擎,再window全局中,就会多一个函数,template('模板的id',需要渲染的数据对象) -->
    <!-- 1、导入模板 -->
    <script src="template-web.js"></script>
    <script src="jquery.js"></script>
</head>

<body>
    <div class="box" style="width:400px;height:400px;border:1px solid grey"> </div>
    <script type="text/html" id="tp1">  //必须修改type属性,默认为javascript
        <div class="title">{{title}}</div>
        <div>姓名:<span class="name">{{name}}</span></div>
        <div>年龄:<span class="age">{{age}}</span></div>
        <div>会员:<span class="isVip">{{isVIP}}</span></div>
        <div>注册时间:<span class="regTime">{{regTime}}</span></div>
        <div>爱好:
            <ul>
                {{hobby}} //{{}}属于一个占位符
            </ul>
        </div>
    </script>
    <script>
        //2、定义数据
        var data = {
            title: '<h3>用户信息</h3>',
            name: 'zs',
            age: 20,
            isVIP: true,
            regTime: new Date(),
            hobby: ['吃饭', '睡觉', '打豆豆']
        }
        var sta = template('tp1', data)  //使用模板引擎
        console.log(sta);
        $('.box').html(sta) //渲染HTML结构
    </script>
</body>

</html>
举报

相关推荐

0 条评论