前端html与Thymeleaf模版引擎中th：if、unless、checked、fie。。。
前端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="">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>thymeleaf用法
<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="${Name()}"></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()函数，执⾏⽆数次。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。