<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>
<title>Document</title>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'></script>
<script src="js/doT.min.js"></script>
<style>
/* {{ if(value.id==0){ }}
//
// {{ }else{ }}
//
// {{ } }} */
</style>
</head>
<body>
<div class="main" style="list-style: none;text-align: center; font-size: 30px;color: #000000;">
<script type="text/template" name_type="mode">
{{~it:value:index}}
<div>{{= value.title}}</div>
<div id="Student" style="color: brown;font-size: 2em;">
<div class="zhizhunbao">
<div>{{= value.name}}</div>
<div id="Student_name_type">
<div id="suniahui">
{{= value.name}}
</div>
</div>
</div>
</div>
<div id="Wonalizhidao_Stdent">
<div id="Student">
{{= value.title}}
</div>
</div>
{{~}}
</script>
</div>
</body>
<script type="text/javascript">
$(function () {
$.ajax({
url: "index.json",
type: "get",
dataType: "json",
contentType: "application/json;charset=UTF-8",
beforeSend: function (xhr) {},
success: function (response) {
console.log(response)
$('.main').append(doT.template($("[name_type='mode']").html())(response));
}
})
});
</script>
</html>
我们先用json模拟一条数据:
[{
"title": "觅客商城",
"name": "箭蚁科技",
"img":"img/9d82d158ccbf6c81924a92c5b13eb13533fa4099.jpg"
}
]