1、引入Thymeleaf
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
2、引入样式js,js访问Model
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{css/bootstrap-theme.css}">
<script th:src="@{js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{js/bootstrap.js}" type="text/javascript"></script>
<script th:inline="javascript">
var single = [[${singlePerson}]];
console.log(single.name + "=====" + single.age);
function getName(name) {
console.log(name)
}
</script>
3、访问Model,遍历Model
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">访问model</h3>
</div>
<div class="panel-body">
<span th:text="${singlePerson.name}"></span>
</div>
</div>
<div th:if="${not #lists.isEmpty(people)}">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">列表</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item" th:each="person:${people}">
<span th:text="${person.name}"></span>
<span th:text="${person.age}"></span>
<button class="btn" th:onclick="'getName(\'' + ${person.name} + '\');'">获得名字</button>
</li>
</ul>
</div>
</div>
</div>
4、遍历option
<select onchange="loadGender()" class="form-control" id="countryGender" name="countryGender"
th:if="${not #lists.isEmpty(chartCountry)}">
<option value="">所有地区男女总占比</option>
<option th:value="${country.workProvince}" th:text="${country.workCounty}"
th:each="country:${chartCountry}"></option>
</select>