【Vue.js】Vueの制御構文（v-if,v-show,v-for）【条件分岐・繰り返し】

HTMLにfor文(繰り返し文)やif文(条件分岐)を使ってDOM構築が出来るようになれば、効率よくサイトやwebアプリが作れるようになると思いませんか？

フロントエンドフレームワークであるVue.jsを使えば、それが可能なのです！

この記事では、Vue.jsでjavascriptやPHPなどのプログラミング言語で使われるfor文(繰り返し文)・if文(条件分岐)を使う方法を解説します。

条件分岐(v-if, v-else)

ある程度プログラムを触ったことがある人ならすぐに理解できると思いますが、

<div v-if=”●●“>v-if DOM</div>

●●の値が「true」の場合、このdivタグを描写し、「false」の場合は描写しません。

そして、v-ifと並列の位置にv-elseを記述すれば、

<div v-else>v-else DOM</div>

v-ifが描写されているときは、v-elseを描写しません。そして、v-ifが描写されていないときは、v-elseが描写されます。

今回のソースの例では、buttonタグのクリックイベントで「show」というdataのtrue,falseを入れ替えていて、buttonをクリックする度にv-ifとv-elseが入れ替わります。

v-ifが描写されるとき(show = true)

v-elseが描写されるとき(show = false)

DOMをhiddenする(v-show)

v-ifとv-showの違いは簡単で、

<div v-if=”show“>v-if DOM</div>

<div v-show=”show“>v-show DOM</div>

このshowの値が「false」のとき、v-ifはDOM自体が削除され、v-showはDOMに「display:hidden;」が付与されます。

showにfalseを代入しとき

このように、「v-if」が付与されているDOMはelementsから消え、「v-show」の方は、「display:none;」が付与されていることがわかります。

繰り返し文(v-for)

<タグ名 v-for=”(変数名, インデックス) in 配列”>{{ 表示したい変数名 }}</タグ名>

で記述するだけ。

今回の例で言うと、humansという配列をforループで回し、適宜表示したい箇所にindexや保持しているオブジェクトのキーを記述するだけ。

APIを叩いてサーバからjson形式で返ってきたデータをv-forで一覧表示するという実装はSPA(シングルページアプリケーション)作成時には頻出するので、必ず身につけてください。

制御構文を使えるからこそ、フレームワークの価値がある

htmlとcssだけのhtmlファイルのDOMをjavascriptで変更する旧来のwebアプリケーションは、webアプリのサイズが大きくなればそれに比例して複雑になっていき、手のつけられない状態になってしまいます。

そういったフロントエンドの悩みを解決してくれるReactやVueといったフロントエンドフレームワークを使いこなし、効率的にWebアプリ(SPAなど)を作成してください。

特にVue.jsは学習コストが低く、日本語スクリプトも揃っているので、これからフロントエンドフレームワークを勉強し始める人には最もオススメです！