前端html與Thymeleaf模版引擎中th:if、unless、checked、field、text、utext、value、each、下拉框、單選框賦值並判斷選中以及其他常見用法。
Thymeleaf 的條件判斷是 通過 th:if 來做的，只有爲真的時候，纔會顯示當前元素和相關值。
<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句話就會顯示</p>
取反可以用not, 或者用th:unless.
<p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句話就不會顯示</p>
<p th:unless="${testBoolean}" >unless 等同於上一句，所以如果testBoolean 是 true ，本句話就不會顯示</p>
除此之外，三元表達式也比較常見
<p th:text="${testBoolean}?'當testBoolean爲真的時候，顯示本句話，這是用三相表達式做的':''" ></p>
關於真假判斷
不只是布爾值的 true 和 false, th:if 表達式返回其他值時也會被認爲是 true 或false，規則如下:
boolean 類型並且值是 true, 返回 true
數值類型並且值不是 0, 返回 true
字符類型(Char)並且值不是 0, 返回 true
String 類型並且值不是 “false”, “off”, “no”, 返回 true
不是 boolean, 數值, 字符, String 的其他類型, 返回 true
值是 null, 返回 false
下拉框：
<form class="form-horizontal m" id="form-person-edit" th:object="${person}">
<input id="user" name="user" th:field="*{user}" type="hidden">
<div class="form-group">
<label class="col-sm-3 control-label">用戶</label>
<div class="col-sm-8">
<select name="group" class="form-control" th:field="*{user}" >
<option value="">請選擇用戶</option>
<option th:each="u:${personlist}" th:value="${u.user}" th:text="${u.name}"></option>
</select>
</div>
</div>
</form>
${person}後臺查詢保存的對象
*{user}對象的屬性
${personlist}後臺查詢保存的集合對象
th:each="u:${personlist}"遍歷集合
th:value="${u.user}" 給value賦值
th:text="${u.name}" 顯示的文本
th:field="{user}" 下拉框的${u.user}等於{user}時選中
單選框：
<-- showState爲值 -->
<input type="radio" name="showState" th:value="0" th:checked="${showState==0}"/>顯示
<input type="radio" name="showState" th:value="1" th:checked="${showState==1 }"/>隱藏
<-- showState爲對象屬性 -->
<input type="radio" name="showState" th:value="0" th:field="*{showState}"/>顯示
<input type="radio" name="showState" th:value="1" th:field="*{showState}"/>隱藏
小例子：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css"th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
<style>
h2{
text-decoration: underline;
font-size:0.9em;
color:gray;
}
</style>
</head>
<body>
<div class="showing">
<h2>條件判斷</h2>
<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句話就會顯示</p>
<p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句話就不會顯示</p>
<p th:unless="${testBoolean}" >unless 等同於上一句，所以如果testBoolean 是 true ，本句話就不會顯示</p>
<p th:text="${testBoolean}?'當testBoolean爲真的時候，顯示本句話，這是用三相表達式做的':''" ></p>
</div>
<div class="showing">
<h2>顯示 轉義和非轉義的 html 文本</h2>
<p th:text="${htmlContent}" ></p>
<p th:utext="${htmlContent}" ></p>
</div>
<div class="showing">
<h2>顯示對象以及對象屬性</h2>
<p th:text="${currentProduct}" ></p>
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>
</div>
<div class="showing" th:object="${currentProduct}">
<h2>*{}方式顯示屬性</h2>
<p th:text="*{name}" ></p>
</div>
<div class="showing">
<h2>算數運算</h2>
<p th:text="${currentProduct.price+999}" ></p>
</div>
<div class="showing">
<div th:replace="include::footer1" ></div>
<div th:replace="include::footer2(2015,2018)" ></div>
</div>
</body>
</html>
關於JS函數延遲執行：
setTimeout("getQuestionStyle()","600"); //2000毫秒後執行test()函數，只執行一次。
setInterval("test()","2000"); //每隔2000毫秒執行一次test()函數，執行無數次。
