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
замечания
Очень важно помнить разницу между v-if
и v-show
. Хотя их использование почти идентично, элемент, связанный с v-if
будет отображаться только в DOM, когда это условие является true
в первый раз . При использовании v-show
директивы, все элементы отображаются в DOM , но скрыты с помощью display
стиля , если условие false
!
обзор
В 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>