下書きが上限に達しているので仮の状態で投稿しています
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タグは使えない)