v-if

v-if

v-ifで条件を指定することで、その条件がTrueの場合のみ、その要素が描画されます。
つまり、v-ifを使うことで、表示する要素を切り替えることができます。

v-ifは、v-elseやv-else-ifと組み合わせて使うことができます。
条件を満たしている場合はＡ、それ以外の場合はＢを表示するといったことが実現できます。

参考

条件付きレンダリング — Vue.js

v-ifを使ってみる

前回作ったカウンターに、v-ifで何かを表示してみます。
前回のカウンタは↓

utouto97.hatenablog.com

カウンターの値が10以上のとき、「10以上!!」と表示してみます。

  <div v-if="count >= 10">
    10以上!!
  </div>

<div>を追加して、その中に「10以上!!」と書きます。
この<div>にv-ifを使っています。

v-ifには、条件を渡します。
今回は、カウンターが10以上のとき、ということで、count >= 10としています。

これで、カウンターが10以上のとき、「10以上!!」と表示されるようになりました。
↓ ↓ ↓

終わり