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

Синтаксис

• <element v-if="condition"></element> // v-if
• <element v-if="condition"></element><element v-else="condition"></element> // v-if | v-то еще
• <template v-if="condition">...</template> // templated v-if
• <element v-show="condition"></element> // v-show

замечания

обзор

В Vue.js условный рендеринг достигается с помощью набора директив по элементам в шаблоне.

v-if

Элемент отображается нормально, когда условие true . Когда условие false , происходит только частичная компиляция, и элемент не отображается в DOM, пока условие не станет true .

v-else

Не принимает условие, а отображает элемент, v-if условие v-if предыдущего элемента false . Может использоваться только после элемента с директивой v-if .

v-show

Поведение аналогично v-if , однако, элемент всегда будет отображаться в DOM, даже если условие false . Если условие false , эта директива просто установит стиль display элемента на none .

v-if / v-else

Предполагая, что у нас есть экземпляр Vue.js определенный как:

var vm = new Vue({
    el: '#example',
    data: {
        a: true,
        b: false
    }
});

Вы можете условно отобразить любой элемент html, включив в него директиву v-if; элемент, содержащий v-if, будет отображаться только если условие имеет значение true:

<!-- will render 'The condition is true' into the DOM -->
<div id="example">
    <h1 v-if="a">The condition is true</h1>
</div>

Элемент <h1> будет отображать в этом случае, потому что переменная 'a' истинна. v-if может использоваться с любым выражением, вычисленным свойством или функцией, которая вычисляет логическое значение:

<div v-if="0 === 1">                  false; won't render</div>
<div v-if="typeof(5) === 'number'">   true; will render</div>

Вы можете использовать элемент template для группировки нескольких элементов для одного условия:

<!-- in this case, nothing will be rendered except for the containing 'div' -->
<div id="example">
    <template v-if="b">
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
</div>

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

<!-- will render only 'ELSE' -->
<div id="example">
    <h1 v-if="b">IF</h1>
    <h1 v-else="a">ELSE</h1>
</div>

Как и с v-if, с помощью v-else вы можете группировать несколько элементов html вместе в <template> :

<div v-if="'a' === 'b'"> This will never be rendered. </div>
<template v-else>
    <ul>
      <li> You can also use templates with v-else. </li>
      <li> All of the content within the template </li>
      <li> will be rendered. </li>
    </ul>
</template>

v-шоу

Использование директивы v-show почти идентично использованию v-if . Единственное отличие состоит в том, что v-show не поддерживает синтаксис <template> , и нет «альтернативного» условия.

var vm = new Vue({
    el: '#example',
    data: {
        a: true
    }
});

Основное использование заключается в следующем ...

<!-- will render 'Condition met' -->
<div id="example">
    <h1 v-show="a">Condition met</h1>
</div>

Хотя v-show не поддерживает директиву v-else для определения «альтернативных» условий, это может быть достигнуто путем отрицания предыдущего ...

<!-- will render 'This is shown' -->
<div id="example">
    <h1 v-show="!a">This is hidden</h1>
    <h1 v-show="a">This is shown</h1>
</div>