Vue.jsにもif文の代わりになる仕組みがあるので紹介したいと思います。
「v-if」という属性を使います。
今回は、条件が一致していたら表示、一致していなければ非表示されるサンプルを作ってみましょう！
HTML（Vue.js if文のような分岐処理はどうやるの？サンプル（v-if））
|
1 2 3 |
<div id="app-3"> <span v-if="seen">Now you see me</span> </div> |
分岐目的のタグに「v-if」属性を入れます。
そして「seen」という値を参照するようにしてみましょう。
スクリプト（Vue.js if文のような分岐処理はどうやるの？サンプル（v-if））
|
1 2 3 4 5 6 |
var app3 = new Vue({ el: '#app-3', data: { seen: true } }) |
[ 4行目 ]
HTMLの「v-if」で参照している「seen」に「true」を入れています。
これでHTMLの「v-if」の条件が「true」となりましたのでspanタグが表示されることになります。
spanタグを非表示にしたい場合は「seen」を「false」にしてみましょう。
spanタグが非表示になります。
簡単ですね！
今回は表示・非表示のために使用しましたが、他にも色々な事ができますので、また別の機会にご紹介したいと思います。
サンプルも作っておきました。
See the Pen Vue.js if文のような分岐処理はどうやるの？サンプル（v-if） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
