Vue入門の第3回（第1回はこちら）です。今回は、Vueの「v-if」を使った条件分岐について学びます。
index.htmlを書き換える
前回作成したHTMLファイル index.html を以下のように書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vueサンプル</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div class="item">
<div class="item-image">
<img v-bind:src="itemImage" />
</div>
<div class="item-info">
<h2>{{ itemName }}</h2>
<p>在庫あり</p>
<p>残りわずか！</p>
<p>在庫なし</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>このindex.htmlの書き換えでは、商品の在庫状況の表示するp要素を3つ追加しました。この時点ではまだVueで表示を制御していないので「在庫あり」「残りわずか！」「在庫なし」のすべてが表示されることになります。
main.jsを書き換える
次に、前回作成したJSファイル main.js を以下のように書き換えます。
var app = new Vue({
el: '#app',
data: {
itemName: 'キッズ靴下',
itemImage: './images/socks-pink.png',
zaiko: 5
}
})このmain.jsの書き換えでは、dataプロパティの一番最後にzaiko: 5という記述を追加しています。zaikoの値には5をセットしました。
ここまでindex.htmlとmain.jsを書き換えましたが、この時点ではまだ index.html 内の在庫状況を表すp要素は、条件分岐表示にはなっていません。
v-ifを使って条件分岐する
在庫状況を表すp要素を条件分岐した表示にするために、index.htmlに追加したp要素の部分をVueの「v-if」と「v-else-if」と「v-else」を使った書式に書き換えます。
<p>在庫あり</p>
<p>残りわずか！</p>
<p>在庫なし</p>↓以下のように書き換える
<p v-if="zaiko > 2">在庫あり</p>
<p v-else-if="zaiko <= 2 && zaiko > 0">残りわずか！</p>
<p v-else>在庫なし</p>HTMLソースを上記のように書き換えることで、さきほど main.js に追加した以下のzaiko: の値に応じた条件分岐表示となります。
zaiko: 5表示を確認してみる
ここまで出来たら、 index.htmlとmain.jsを上書き保存して表示を確認してみましょう。以下のように、画面にピンクの靴下画像が表示されて、その下に「キッズ靴下 在庫あり」と表示されていれば成功です。
以下は、これまでに作成したサンプルページです。
https://programming-world.net/sample/vue_sample/03/index.html
条件によって表示内容を変える
「v-if」と「v-else-if」と「v-else」を使った書式にしたことで、何が起きたのか確認していきましょう。
現在の index.html は、以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vueサンプル</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div class="item">
<div class="item-image">
<img v-bind:src="itemImage" />
</div>
<div class="item-info">
<h2>{{ itemName }}</h2>
<p v-if="zaiko > 2">在庫あり</p>
<p v-else-if="zaiko <= 2 && zaiko > 0">残りわずか！</p>
<p v-else>在庫なし</p>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>上記のindex.htmlのなかの 在庫状況を表示する部分では、v-ifディレクティブ、v-else-ifディレクティブ、v-elseディレクティブが使用されています。この３つのディレクティブは、一般的なプログラミング言語のif ～ else文と同じです。
<p v-if="zaiko > 2">在庫あり</p>
<p v-else-if="zaiko <= 2 && zaiko > 0">残りわずか！</p>
<p v-else>在庫なし</p>上記のコードは、「もしzaikoが2より大きければ”在庫あり”と表示しなさい、もしzaikoが2以下で0より大きければ”残りわずか！”と表示しなさい、それ以外なら”在庫なし”と表示しなさい」という意味です。
現在の main.js は、以下の通りです。
var app = new Vue({
el: '#app',
data: {
itemName: 'キッズ靴下',
itemImage: './images/socks-pink.png',
zaiko: 5
}
})上記のmain.jsのなかの zaiko: 5 の部分でzaikoの値が5と指定されています。今回作成したサンプルでは <p v-if=”zaiko > 2″>在庫あり</p> の条件と一致するので、画面には「在庫あり」が表示されました。
もし、main.jsを以下のようにzaiko: 1と書き換えたら、画面には「 残りわずか！ 」が表示されます。（サンプルを別画面で開く）
zaiko: 1もし、main.jsを以下のようにzaiko: 0と書き換えたら、画面には「在庫なし」が表示されます。（サンプルを別画面で開く）
zaiko: 0次回へ続きます。
