th:if
Trong Thymeleaf, một biến hoặc một biểu thức nào
đó được đánh giá là false nếu giá trị của nó là null, false, 0, “false”, “off”,
“no”. Các trường hơp khác được đánh giá là true.
Cú pháp 1:
<someHtmlTag th:if="condition">
…
</someHtmlTag>
Cú pháp 2:
<th:block th:if="condition">
…
</th:block>
th:unless
Một thuộc tính khác bạn cũng có thể
sử dụng đó là th:unless, nó
là phủ nhận của th:if.
<someTag th:unless = "condition"> ... </someTag>
Tương
đương
<someTag th:if = "!condition"> ... </someTag>
Ví dụ 1
View
<h1>th:if</h1><div class="product-container" th:each="product :
${products}"> <div class="img-container" th:if="${product.image}"> <img th:src="@{|/${product.image}|}" height="70" /> </div> <div> <b>Code:</b>
<span th:utext="${product.code}"></span> </div> <div> <b>Name:</b>
<span th:utext="${product.name}"></span> </div></div>
Ví dụ 2: Sử dụng th:if và th:unless
<div
class="product-container" th:each="product :
${products}">
<!--/*
If the product has image, this code will be rendered. */-->
<div
class="img-container" th:if="${product.image}">
<img
th:src="@{|/${product.image}|}" height="70" />
</div>
<!--/*
If the product has no image, display default Image. */-->
<div class="img-container" th:unless="${product.image}">
<div class="img-container" th:unless="${product.image}">
<img
th:src="@{/no-image.png}" height="70" />
</div>
<div><b>Code:</b>
<span th:utext="${product.code}"></span></div>
<div>
<b>Name:</b>
<span th:utext="${product.name}"></span>
</div>
</div>
th:switch, th:case
Thymeleaf sử dụng th:swith/th:case tương tự cấu trúc switch/case trong Java.
<div th:switch="${user.role}">
<p th:case="'admin'">User
is an administrator</p>
<p th:case="${roles.manager}">User
is a manager</p>
<p th:case="'staff'">User
is a staff</p>
</div>
<!-- th:switch/th:case with default case:
-->
<div th:switch="${user.role}">
<p th:case="'admin'">User
is an administrator</p>
<p th:case="${roles.manager}">User
is a manager</p>
<p th:case="'staff'">User
is a staff</p>
<p th:case="*">User
is some other thing</p>
</div>
Chương trình sẽ đánh giá lần lượt các case (trường hợp) từ trên xuống
dưới, nếu tìm thấy 1 case được
đánh giá là true (đúng)
nó sẽ "render" mã
trong case này, tất
các case khác sẽ bị bỏ
qua.
th:case = "*" là case mặc
định của cấu trúc th:swith/th:case.
Nếu tất cả các case ở
phía trên bị đánh giá là false thì
mã củacase mặc định sẽ
được "render".
Ví dụ
<h1>tth:witch/th:case</h1><h4 th:utext="${user.userName}"></h4><div th:switch="${user.role}"> <p th:case="'admin'">User
is an administrator</p> <p th:case="'manager'">User
is a manager</p> <p th:case="'staff'">User
is a staff</p> <p th:case="*">User
is some other thing</p></div>
CodeLean.vn
إرسال تعليق