前端html与Thymeleaf模版引擎中th:if、unless、checked、field、text、utext、value、each、下拉框、单选框赋值并判断选中以及其他常见用法
前端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()函数，执行无数次。