カテゴリ: notes
タグ: vuejs

条件付きレンダリング|Vue.js再学習

触れないタイミングが3ヶ月あったり忘れてしまった事に焦りを感じたので、今度は勉強したことをブロクに残していきたいと思います。 内容的には公式ドキュメントの写経のようなものになります。

今日は条件付きレンダリングを見ていきます。

条件付きレンダリング

条件付きレンダリング

v-ifディレクティブ

<h1 v-if="true">Yes</h1>

これは次のように表示されます

<h1>yes</h1>

テンプレートでのv-ifによる条件グループ

v-ifはディレクティブなので、単一の要素に付加する必要があります。しかし、1要素よりも多くの要素と切り替えたい場合はどうでしょうか? このケースでは、非表示ラッパーとして提供される、<template>要素でv-ifを使用できます。 最終的に描画される結果は、<template>要素は含まれません。

<template v-if="true">
  <h1>Title</h1>
  <p>lorem</p>
  <p>lorem</p>
</template>

v-elseディレクティブ

v-elseディレクティブはv-ifの”else block”として機能します。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else要素は、v-ifv-else-if要素の直後になければなりません。 それ以外の場合、認識されません。

v-else-ifディレクティブ

v-else-ifディレクティブはv-ifの”else if block”として機能します。また、複数回連結することができます。

<div v-if="type === 'A'">
  A
</div>
<div v-if="type === 'B'">
  B
</div>
<div v-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

keyによる再利用可能な要素の制御

Vueは要素を可能な限り効率的に描画しようとします。 たとえば、ユーザが複数のログインタイプを切り替えることを許可する場合は、次のようにします。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Username</label>
  <input placeholder="Enter your email address">
</template>

上記のコードではloginTypeを切り替えても、ユーザが既に入力したものは消去されません。 両方の<template>で同じ要素を使用するので、<input>は置き換えられません。

開発者ツールを開き、inputにテキストを入力して、トグルボタンを押して確認してみましょう。

<input>に注目します。 トグルボタンを押すと「input」と「placeholderの値」がハイライトされる事に気が付きます。 これは仮想DOMを使って、inputは置き換えられず、最小限の変更である「placeholderの値」だけを変更しているという事を示唆します。 inputが置き換えられていないので、入力したものは消去されません。 (inputがハイライトされるのは、その中の何かで変更があった事を示しているため)

About

はらぺこ

職業:フロントエンドエンジニア
趣味:自転車/テニス/空手
愛車:
 ✓ブリヂストン オルディナs5
 ✓アンカー RS8 EL

神戸にて爆誕。
友人から「お前がマスターして教えてくれ」と渡された『HTML&スタイルシート ポケットリファレンス』がキッカケでWeb業界への一歩を踏み出す事になる。

2013年7月にクロスバイクを購入して自転車にドハマリする。
全力で遊ぶ合間に、ほどほどに頑張る日々を過ごしています。

飼い主 はっぴー

2014年10月20日(誕生日)の引っ越し日、捨て猫になっていた所、運命の出会いを果たす。 
(その日は雨で、3日間雨が続く寒い日だった。このまま放っておけないと自転車生活と秤にかけて、はっぴーを選択する)
5時間かけて油断させ、近づいてきた所をガッと拾い上げ、そのまま家へ猛ダッシュ、玄関の鍵を閉めて家族になる。以後オレたちはファミリーだ。

助けたつもりが、実際は自分の方が精神的に救われている。はっぴーなしでは生きていけない。(最早「飼い主」と言って差し支えないだろう)

「はっぴー」という名前の由来は、『幸せになってほしい』という想いで名付けた。