
Vue.js での条件分岐の基本
Vue.js での条件分岐のやり方、基本のきです。
条件分岐にも応用編はあるのだけど、まずは基本から。
実際の、動作サンプルは
こちら。
条件分岐
「v-if」ディレクディブを使います。
使い方はソースを見るのが手っ取り早いですね。
HTML
1 |
<p v-if="isShow">「isShow」が true のときに表示します。</p> |
条件で表示制御をしたいタグに「v-if」を追加します。
今回は「isShow」というデータの真偽値で表示を切り替えたいので、「v-if=”isShow”」をpタグに追加しています。
JavaScript
1 2 3 4 5 6 7 |
var app = new Vue({ el: "#app", data: { isShow: true } }) |
スクリプトはこちら。
data に「isShow」を定義し、初期値に true を設定しています。
動かしてみると「「isShow」が true のときに表示します。」というテキストが、画面に表示されていると思います。
データの変更とDOMへの反映
実際に動作確認をしてみましょう。
開発者ツールのコンソールから、下記スクリプトを実行します。
1 |
app.isShow = false; |
「app.isShow」の true / false を切り替えることで、pタグの表示・非表示を切り替えることができているのがわかります。