Vue MasteryのIntro to Vue 2をやってみる~Lesson 3~
はじめに
ご覧いただきありがとうございます。mocです。
前回は、Vue MasteryのIntro to Vue 2のlesson2をやってみました。
今回は、引き続き、lesson3をやっていきます。
今回の内容
lesson3では、conditional rendering（条件付きレンダリング）について学べます。
ある条件で、特定の要素を表示したり、非表示にしたりできる仕組みがVueにはあるようです。
今回も、例のごとく、事前準備が必要だったので、それをやっていきましょう。
事前準備
今回必要なファイルは下記のものたちです。
今回は特に、事前準備として編集しておくファイルはありません。
lesson3から始める方は、前回記事をご参照いただければと思います。
- main.js
- index.html
- style.css
- vmSocks-green.jpg
それでは、内容に入っていきます。
今回の目的
前回、製品の画像と製品名を表示してきました。
index.htmlをブラウザで表示すると、以下のようになっているはずです。
今回は、この製品の在庫があるかどうかをVueインスタンスに定義したデータを元に判定し、表示していきます。
コーディングスタート
main.jsに在庫の有無を表すプロパティ（inStock）を追加します。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: './assets/vmSocks-green.jpg',
+ inStock: true
}
})
課題
webアプリケーションでは、条件に合致するかどうかでページ上に要素を表示するか決めたいときがあります。
例えば、製品の在庫がなかったら、在庫切れであることをページ上に表示すべきです。
まずは、index.htmlを編集して、**在庫あり（In Stock）と在庫切れ（Out of Stock）**を表示するための要素を追加します。
（該当箇所の前後のみを示します。）
<div class="product">
<div class="product-image">
<img :src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
+ <p>In Stock</p>
+ <p>Out of Stock</p>
</div>
</div>
解決方法
Vueでは、これを簡単に解決できます。
今回、VueインスタンスのデータにinStockというプロパティを追加したので、それを利用します。
また、要素を表示するかどうかを決定するのに、v-ifやv-elseディレクティブを利用します。
index.htmlを次のように編集してみましょう。
<div class="product">
<div class="product-image">
<img :src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
- <p>In Stock</p>
- <p>Out of Stock</p>
+ <p v-if="inStock">In Stock</p>
+ <p v-else>Out of Stock</p>
</div>
</div>
inStockが真(true)であれば、In Stockと表示され、偽(false)であれば、Out of Stockと表示されます。
現時点のコードであれば、inStockの値は真(true)なので、In Stockと表示されるはずです。
ブラウザで確認してみましょう。
ちゃんと表示されましたね！
試しに、main.jsのVueインスタンスのデータのinStockプロパティの値をfalseに変えて、再表示してみてください。
きっと、Out of Stockと表示されるはずです。
v-else-ifディレクティブについて
v-ifやv-else以外にもv-else-ifというディレクティブも利用することができます。
例を示すために少しだけ複雑なことをやってみます。
まずは、main.jsを次のように編集します。
inventory(在庫)というプロパティを追加します。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image: './assets/vmSocks-green.jpg',
- inStock: true
+ inventory: 100
}
})
次に、index.htmlを編集します。
<div class="product">
<div class="product-image">
<img :src="image">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
- <p v-if="inStock">In Stock</p>
- <p v-else>Out of Stock</p>
+ <p v-if="inventory > 10">In Stock</p>
+ <p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
+ <p v-else>Out of Stock</p>
</div>
</div>
これにより、inventory（在庫）の値によって、３つの文言の出し分けができるようになりました。
まずはこのまま再表示してみます。
inventoryの値が100（10より大きい）なので、In Stockと表示されました。
次に、main.jsのVueインスタンスのinventoryプロパティの値を8に変更して、再表示してみます。
inventoryの8（10より小さく、0より大きい）なので、**Almost sold out!**と表示されました。
最後にinventoryプロパティの値を0にして、再表示してみましょう。
Out of Stockと表示されましたね。
このように、v-ifやv-else-if、v-elseを使って、要素の出し分けができるようになりました。
v-showディレクティブについて
実はもう一つ、v-showディレクティブというものがあります。
このディレクティブは、ページ上の要素を頻繁に表示と非表示を切り替える場合に使うべきです。
なぜなら、v-showを利用している要素は、DOM上に常に存在しており、表示や非表示は、CSSのプロパティであるdisplay: noneを付与するかどうかで制御しているからです。
まとめ
lesson3では、条件付きレンダリングを勉強しました。
Vueインスタンスにもつデータによって、表示を切り替えれるのはよいですね。
今回の在庫の有無によって表示を切り替える以外にも、ログイン機能を有するwebアプリケーションであれば、ログイン状態によって、表示を切り替えるときとかにも使えそうです。
今回もできることが増えました。楽しいですね！
次はlesson4です。
お楽しみに！！
Discussion