0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsまとめ③「条件付きレンダリング」と「リストレンダリング」

Posted at

下書きが上限に達しているので仮の状態で投稿しています

v-if="true or false"
条件でレンダリングするかしないか決定する

v-else
v-if, v-else-ifの直後に使用
else文と同様に扱うことができる

v-else-if
v-ifの直後
else if文

templateタグ
不必要な要素を加えずにv-ifを複数の要素に適応させる

v-show
display:none;によって非表示にする(v-ifはtemplateタグごとなくなる)

v-ifとv-showの使い分け
v-if 切り替えコスト高い
v-show 初期描画コスト高い(最初に全てDOMに追加するから)

v-for リストレンダリング

{{ 要素 }} で配列をリスト化 {{ インデックス }} {{ 要素 }} でインデックスも扱える {{ 要素 }} でオブジェクトをリスト化 {{ インデックス }} {{ キー }} {{ 要素 }} でキーとインデックスも扱える templateタグとv-forを組み合わせることもできる(基本的には後述のkey属性を使う) {{ 要素 }} で整数をリスト化 inではなくofでも可能 :key="要素" を一緒に記述することでそれぞれを対応付けることができる(templateタグは使えない)
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?