基礎からメモ： Vue.js CH2-p67 テンプレートにおける条件分岐

Vue.js

v-ifやv-showディレクティブを使うと、テンプレートベースで条件分岐させることができる。

[index08.html]

<div id="app">
    <p v-if="ok">v-if条件による描画</p>
    <p v-show="ok">v-show条件による表示</p>
</div>

[main08.js]

var app = new Vue({
  el: '#app',
  data: {
      ok: true
  },
})

コンソールでapp.ok = falseとすると、表示が消える。ただしv-ifとv-showでは消え方が違う。

v-ifではコメント化されDOM自体が消える。v-showではスタイルがdisplay: noneになって、文字通り表示が見えなくなっているだけだ。

<div id="app">
    <!---->
    <p style="display: none;">v-show条件による表示</p>
</div>

v-ifによって表示がされなかった場合、DOMごと消えるのでDOMに対する監視状態もされなくなる。よって再度表示された時は初期化されている。v-showで表示がされなかった場合は、画面から見えなくなるだけなのでDOMに対するリアクティブな状態は保たれている。切り替えの頻度が高くパフォーマンスに影響する場合はv-showを、そうでない場合やDOMが残っているとエラーが起きるような場合はv-ifをと使い分けるとよい。

templateタグによってグループ化する

v-ifはHTMLタグの属性として記述するものなので、複数のDOMの表示を一緒に切り替えたい場合は一つひとつのタグに記述する必要がある。沢山のタグの場合は面倒なので、<template>タグで囲ってしまう方法が使える。ただしこの方法はv-showには使えない。

<template v-if="ok">
      <header>タイトル</header>
      <div>コンテンツ</div>
</template>

v-else-ifとv-else

複数条件分岐にv-else-ifとv-elseが使える。

  <div id="app">
      <div v-if="type === 'A'">
        TYPE は A
      </div>
      <div v-else-if="type === 'B'">
        TYPE は B
      </div>
      <div v-else>
        全ての条件を満たさなかった
      </div>
  </div>

var app = new Vue({
  el: '#app',
  data: {
      type: 'C'
  },
})

app.typeに何を代入するかによって表示が変わるはずだ。

ユニークなkeyの使用

v-ifによるグループ化で同じDOMに作用させた場合、属性の状態が残ったり、トランジションが発動しないなどの動作不良が起きる場合がある。そういうときはそれぞれの要素が違うことを明示するためにユニークなkeyを設定することで回避できる。

<div v-if="type === 'A'" key="first-item">
    TYPE は A
</div>
<div v-else-if="type === 'B'" key="second-item">
    TYPE は B
</div>
<div v-else key="others">
    全ての条件を満たさなかった
</div>
  • v-ifやv-showディレクティブを使うと、テンプレートベースで条件分岐させることができる。
  • v-ifではコメント化されDOM自体が消える。v-showではスタイルがdisplay: noneになる。
  • <template>タグにv-ifを使い囲ってしまうことで、複数のDOMを同時に条件分岐させることができる。
  • v-ifでグループ化されたタグの動作エラーを回避するには、各タグにユニークなkeyを付与する。