タイトル: ifの条件分岐とtemplateを用いたグループ化
SEOタイトル: 【Veu.js】ifの条件分岐とtemplateを用いたグループ化
v-ifディレクティブを使用することで条件分岐処理を実行することが出来る。
ifの実装例
| html |
|---|
|
<div id="app"> <p v-if="true_data">This is True</p> <p v-if="false_data">This is False</p> </div> |
| js |
|---|
|
var app = new Vue({ el: '#app', data: { true_data: true, false_data: false, } }) |
出力結果
This is True
else if と else の実装
| html |
|---|
|
<div id="app"> <div v-if="false_data"> if </div> <div v-else-if="true_date"> else if </div> <div v-else="true_date"> else </div> </div> |
出力結果
else if
templateによるグループ化
ifを付けた要素の子要素が複数ある場合は正しく評価されない。
以下、正しく評価されない実装例
| html |
|---|
|
<div v-if="true_data"> <p>aaa<p> <p>bbb<p> </div> |
正しく評価するにはtemplateタグを使用する必要がある。
| html |
|---|
|
<template v-if="true_data"> <p>aaa<p> <p>bbb<p> </template> |