Vue.js
조건부 렌더링
수색…
통사론
-
<element v-if="condition"></element>
// v-if -
<element v-if="condition"></element><element v-else="condition"></element>
// v-if | v-else -
<template v-if="condition">...</template>
// 템플릿 화 된 v-if -
<element v-show="condition"></element>
// v-show
비고
v-if
와 v-show
의 차이를 기억하는 것은 매우 중요합니다. 그 용도는 거의 동일하지만, 요소가 결합 v-if
는 조건이 때 단지 DOM에 렌더링 true
처음. v-show
지시문을 사용할 때 모든 요소 는 DOM에 렌더링 되지만 조건이 false
경우 display
스타일을 사용하여 숨겨집니다!
개요
Vue.js에서 조건부 렌더링은 템플릿의 요소에 일련의 지시문을 사용하여 수행됩니다.
v-if
조건이 true
요소가 정상적으로 표시됩니다. 조건이 false
이면 부분 컴파일 만 발생하고 요소가 조건이 true
이 될 때까지 DOM에 렌더링되지 않습니다.
v-else
조건을 받아들이지 않고 이전 요소의 v-if
조건이 false
v-if
요소를 렌더링합니다. v-if
지시어가있는 요소 뒤에 만 사용할 수 있습니다.
v-show
그러나 v-if
와 유사하게 동작하지만 조건이 false
일 때도 요소는 항상 DOM에 렌더링됩니다. 조건이 false
이면이 지시문은 요소의 display
스타일을 none
설정합니다.
v-if / v-else
Vue.js
인스턴스가 다음과 같이 정의되어 있다고 가정합니다.
var vm = new Vue({
el: '#example',
data: {
a: true,
b: false
}
});
v-if 지시문을 포함시켜 HTML 요소를 조건부로 렌더링 할 수 있습니다. 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>
변수 'a'가 참이므로 <h1>
요소가이 경우 렌더링됩니다. 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의 조건이 false 인 경우에만 표시됩니다. 이는 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를 사용하여 <template>
내에 여러 HTML 요소를 함께 그룹화 할 수 있습니다.
<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-show
v-show
지시문은 v-if
지시문과 거의 동일 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>