[Thymeleaf] 유용한 타임리프 문법 #1

알아두면 정말 쓸모있는 타임리프 문법들이 있다.

 

 

📌th:classappend

: 다양하게 쓰일 수 있지만 보통은 일정 조건일 경우에 class에 덧붙이고 싶을 때 유용하다.

<a href="#" id="ko" th:classappend="${#strings.equals(item.locale, 'ko')} ? 'active' : ''" class="">국문</a>

 

📌th:value

<input type="text" id="startDay" name="startDay" th:value="${item != null} ? ${item.startDay} : ''" class="datetimepicker" placeholder="시작일" readonly />

 

📌th:checked

: checkbox 에 체크여부 처리가 쉽게 가능하다.

<input type="checkbox" id="chk" class="chk" name="" th:checked="${item != null} ? ${#strings.equals(item.showYn,'Y')} : false" checked>

 

📌th:text

<textarea id="contents" name="contents" cols="10" rows="5" class="fm-ta" th:text="${item != null and item.contents != null} ? ${item.contents} : ''"></textarea>

 

📌th:src

<img id="previewFileImage" th:src="${file != null} ? '/popup/popup/'+${file.fileName} : '/images/no-image.png'" alt="업로드된 파일 미리보기">

 

📌th:selected

<select id="orderNo" name="orderNo">
    <option value="1" th:selected="${item != null} ? ${#strings.equals(item.orderNo,'1')} : false">1</option>
    <option value="2" th:selected="${item != null} ? ${#strings.equals(item.orderNo,'2')} : false">2</option>
    <option value="3" th:selected="${item != null} ? ${#strings.equals(item.orderNo,'3')} : false">3</option>
</select>

 

📌th:href

: 아래 예시 처럼 th:target도 존재한다.

<button type="reset" id="" class="btn-t-2 c2"><a th:href="@{/superintend/popup/list}">취소</a></button>

<a th:href="'/eng/update/view/'+${item.board.no}+'?code='+${code}" class="boardLst-link">

<a th:href="@{/brand/{slug}/product/{code}(slug=${item.brandInfo.slug},code=${item.code})}" th:title="${item.name}">

<a th:href="@{${#strings.equals(item.linkType,'NONE')} ? 'javascript:;' : ${item.linkUrlPC}}" th:target="${#strings.equals(item.linkType,'NEW') ? '_blank' : '_self'}">

 

 

📌th:style

: css와 관련된 것을 타임리프로 처리하고 싶을 때 사용한다.

<button type="button" id="btnDelete" th:style="${item == null ? 'display:none' : 'display:inline-block'}">삭제</button>