Vue.js
条件付きレンダリング
サーチ…
構文
-
<element v-if="condition"></element>
// v-if -
<element v-if="condition"></element><element v-else="condition"></element>
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
スタイルを使用して非display
false
。
概要
Vue.jsでは、条件付きレンダリングは、テンプレート内の要素に対して一連のディレクティブを使用することによって実現されます。
v-if
conditionがtrue
場合、要素は通常表示されtrue
。条件がfalse
場合、 部分的なコンパイルのみが行われ、条件がtrue
なるまで要素はDOMにレンダリングされません。
v-else
条件を受け付けず、以前の要素のv-if
条件がfalse
v-if
要素をレンダリングしfalse
。 v-if
ディレクティブを持つ要素の後でのみ使用できます。
v-show
ただし、 v-if
と同様に動作しますが、条件がfalse
場合でも、要素は常に DOMにレンダリングされfalse
。条件が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
要素を使用すると、1つの条件に対して複数の要素をグループ化できます。
<!-- 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を使用すると、複数の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-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>