Условный рендеринг

v-если

Когда мы хотим условно визуализировать блок, мы используем директиву v-if. Блок не будет отображаться, если выражение директивы не имеет истинного значения.

<h1 v-if="awesome">Vue is awesome!</h1>

Мы также можем добавить «else-block», используя v-else:

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else">Oh No it is more than Awesome</h1>

Условные группы с v-if на <шаблон>

Поскольку v-if является директивой, она должна быть присоединена к одному элементу. Как вы собираетесь переключать более одного элемента? В таком случае мы должны использовать v-if для элемента <template>,

Это послужит невидимой оберткой. Окончательный результат, который будет отображен, не будет включать элемент <template>.

<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
 </template>

v- то еще

мы используем директиву v-else, чтобы указать блок else для v-if:

<div v-if="Math.random()> 0.5">
I am Visible
</div>
<div v-else>
I'm now Invisible
</div>

Если элемент v-else не следует сразу за элементом v-if или v-else-if, он не будет распознан.

v- то еще, если

V-else-if является реализацией else-if для v-if, она может быть объединена несколько раз:

<div v-if="type===A">
A
</div>
<div v-else-if="type===B">
B
</div>
<div v-else-if="type===C">
C
</div>
<div v-else>
Not A/B/C
</div>

V-else-if должен следовать непосредственно за элементом v-if или v-else-if.

Управление многоразовыми элементами с ключом

Vue всегда будет стараться помочь нам сделать наш элемент максимально эффективным и предпочитает использовать их повторно, а не создавать их с нуля.

Это не только делает Vue очень быстрым, но и имеет другие полезные преимущества. Например, он может позволить пользователям переключаться между несколькими типами входа в систему:

<template v-if="loginType ==='username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>

Когда мы переключаем loginType в приведенном выше фрагменте, данные, ранее введенные пользователем, будут сохранены.

Вышеприведенный сценарий хорош, но иногда он нежелателен. Если мы не хотим повторно использовать элементы, мы добавляем ключевой атрибут с уникальным значением:

<template v-if="loginType ==='username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

v-шоу

В качестве альтернативы мы можем использовать директиву v-show для отображения элемента. Использование одинаково в значительной степени:

<h1 v-show="ok"> Hello! </h1>

v-show не поддерживает ни элемент шаблона, ни v-else.

v-if vs v-show

v-if гарантирует, что слушатели событий и дочерние компоненты внутри условного блока должным образом уничтожаются и воссоздаются во время переключений и, таким образом, реализуют реальный условный рендеринг.

v-if ленив: он не будет ничего делать, если условие ложно при начальном рендеринге, он будет оставаться таким до тех пор, пока условие не станет истинным в первый раз.

С другой стороны, v-show проще - независимо от начального условия, элемент всегда отображается.

В целом, у v-if более высокие затраты на переключение, тогда как у v-show выше начальные затраты на рендеринг.

V-для с V-если

всегда заманчиво использовать v-if и v-for вместе, однако это не рекомендуется. Однако обратите внимание, что при использовании вместе с v-if директива v-for имеет более высокий приоритет, чем v-if.