ViteTemplateHTML

Умови та умовні вирази в HTML-компонентах

Цей документ описує використання в компонентах умов та умовних виразів в залежності від переданих параметрів.

Використання умовного виразу:

<button type="button" {{isActive != "true" ? "disabled" : ''}}>

   <Content/>

</button>

<header class="{{isActive ? 'active-class' : ''}}">

   <Content/>

</header>

// src/html/components/Button/Button.html

<if condition="elementType == 'button'">

   <button type="button">

      <Content/>

   </button>

</if>

<elseif condition="elementType == 'link'">

   <a href="{{url}}" target="_blank">

      <Content/>

   </a>

</elseif>

<else>

   Не обовязковий блок, але можна використовувати

</else>

// src/html/components/Hero/Hero.html

<section class="hero">

   <if condition="titleText">

      <h1 class="hero__title">{{titleText}}</h1>

   </if>

   <Content/>

</section>

Зручно, коли кілька гілок порівнюються з одним значенням.

<switch key="elementType">

   <case value="button">

      <button type="button">{{children}}</button>

   </case>

   <case value="link">

      <a href="{{url}}">{{children}}</a>

   </case>

   <default>

      <span>{{children}}</span>

   </default>

</switch>

<switch key="..."> виконує JS-вираз. <case value="..."> порівнює з літералом, а для JS-виразу можна використати expression або condition.

Альтернативний синтаксис, схожий на Vue.js. Працює як атрибут на будь-якому тегу.

<div v-if="isActive">

   Активний контент

</div>

Якщо вираз повертає false, null або undefined, атрибут не буде виведений. Значення true виводить boolean-атрибут без значення.

<button disabled="{{isDisabled}}">Save</button>

<input required="{{isRequired}}" />