Search buenoDC

1 min de leitura

Usando condicionais na visão

Você pode utilizar estruturas condicionais no HTML para mostrar/ocultar fragmentos de código a partir de uma condição.

Estrutura IF-ELSE

Como você deve ter notado o Thymeleaf proporciona poderes para manipularmos o HTML. Além de conseguirmos manipular objetos dentro das visões podemos também criar estruturas condicionais dentro delas através do dialeto th:if e th:unless.

Vamos alterar a visão list.html para que ela condicione a exibição do preço de acordo com seu valor. Se o valor do produto for menor que R$ 1000 é mostrado um desconto de 5%, caso contrário é mostrado um desconto de 10%.

    <p th:if="${product.price >= 1000}">10% de desconto</p>
    <p th:unless="${product.price > 1000}">5% de desconto</p>

O th:if vai renderizar o elemento na tela caso a condicional seja verdadeira. Já o th:unless vai renderizar o elemento caso a condicional seja falsa.

Existe também a opção de utilizar o operador ternário. Nele você pode definir uma condição e caso ela seja verdadeira o primeiro valor é retornado, caso contrário o segundo valor é retornado.

    <p th:text="${product.price >= 1000} ? '10% de desconto' : '5% de desconto'"></p>

Estrutura SWITCH-CASE

Existe também estrutura switch/case caso você queira tratar diversos casos na mesma condição. Para utilizara existem dois atributos: th:switch e th:case.

<div th:switch="${user.role}">
  <p th:case="'admin'">Usuário é um admin</p>
  <p th:case="'user'">Usuário comum</p>
  <!--CASO DEFAULT (Padrão)-->
  <p th:case="*">Usuário não é nada (ainda)</p>
</div>

Fique atento que para comparar com uma String você deve utilizar as aspas simples '' dentro do atributo como eh th:case="'admin'"