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

備考

概要

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>