Aire Project Blog

Vue.js

Vue.js での条件分岐の基本

Vue.js での条件分岐のやり方、基本のきです。
条件分岐にも応用編はあるのだけど、まずは基本から。

【参考】
Vue.js 公式ドキュメント:条件分岐とループ

実際の、動作サンプルは
こちら

条件分岐

v-if」ディレクディブを使います。
使い方はソースを見るのが手っ取り早いですね。

HTML

条件で表示制御をしたいタグに「v-if」を追加します。
今回は「isShow」というデータの真偽値で表示を切り替えたいので、「v-if=”isShow”」をpタグに追加しています。

JavaScript

スクリプトはこちら。
data に「isShow」を定義し、初期値に true を設定しています。

動かしてみると「「isShow」が true のときに表示します。」というテキストが、画面に表示されていると思います。

データの変更とDOMへの反映

実際に動作確認をしてみましょう。
開発者ツールのコンソールから、下記スクリプトを実行します。

「app.isShow」の true / false を切り替えることで、pタグの表示・非表示を切り替えることができているのがわかります。