クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Vue.js

Vue.js if文のような分岐処理はどうやるの?サンプル(v-if)

投稿日:2018年4月29日 更新日:

Vue.jsにもif文の代わりになる仕組みがあるので紹介したいと思います。
「v-if」という属性を使います。
今回は、条件が一致していたら表示、一致していなければ非表示されるサンプルを作ってみましょう!

 

HTML(Vue.js if文のような分岐処理はどうやるの?サンプル(v-if))

分岐目的のタグに「v-if」属性を入れます。
そして「seen」という値を参照するようにしてみましょう。

 

スクリプト(Vue.js if文のような分岐処理はどうやるの?サンプル(v-if))

[ 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

コード変更や、大きな画面でみたい場合はこちらから。

 

-Vue.js

執筆者:

関連記事

Vue.js クリックで関数を実行させるサンプル(v-on、methods)

Vue.jsのタグに対するイベントは「v-on」を使います。 今回は、ボタンがクリックされた時に関数を実行してみましょう! スクリプト(Vue.js クリックで関数を実行させるサンプル(v-on、me …

Vue.js for文のような繰り返し処理はどうやるの?サンプル(v-for)

もちろんVue.jsにも繰り返し処理があります。 「v-for」を使います(分かりやすい名前ですね)。 早速、どうやるのか試していきましょう! スクリプト(Vue.js for文のような繰り返し処理は …

Vue.js v-forでインデックス(カウンタ)を付けるサンプル(v-forでindex)

Vue.jsも少しずつ勉強していこうと思います。 そのままでも便利なv-forですが、何回目のループかを知りたい場合があります。 その場合もv-forだけで対応可能です。具体的にはv-forで展開され …

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

Vue.jsでもスタイルの操作が可能です。 バインディングもされますので、オブジェクトの値を変えるだけでスタイルを変更することができます。 アイデア次第で面白いものが作れそうですね。 早速簡単なものを …

Vue.js 一番簡単なサンプル

Vue.jsが流行しているようですので、勉強していきたいと思います。 まずは公式ページにもある、一番簡単なサンプルを作っていきましょう!   Vue.jsの読み込み(Vue.js一番簡単なサ …


comment

メールアドレスが公開されることはありません。