<!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>
?
<!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">
<div class="title">{{@ title}}</div>
<div>姓名：<span class="name">{{name}}</span></div>
<div>年龄：<span class="age">{{age}}</span></div>
<div>会员：<span class="isVip">{{if isVIP==true}}是{{/if}}</span></div>
<div>注册时间：<span class="regTime">{{regTime | dateFormat}}</span></div>
<div>爱好：
<ul>
<!-- 循环输出 -->
{{each hobby}}
<li>{{$value}} </li>
{{/each}}
</ul>
</div>
</script>
<script>
//定义过滤器
template.defaults.imports.dateFormat = function(date) {
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
console.log(date);
}
//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)
</script>
</body>
</html>
