Vue.js を学ぶ (5) – 要素の有無／表示・非表示

2019/08/12 2019/08/14

Contents

v-if と v-show で要素を見せたり隠したりする

See the Pen
Vue – 5 by FuchiAz (@fuchiaz)
on CodePen.

どちらもその要素を見せるか見せないかを指定するディレクティブ。

値としてtrueまたはfalseを与える。
trueが与えられたときは表示されるが、falseのときは表示されない。

今回はチェックボックスのv-modelと同じcheckedプロパティを与えているので、チェックが入っているときだけ表示されるようになっている。

似た者同士に見えるが違いもある。

v-ifの場合はfalseが与えられるとDOMから取り除かれる。

v-showの場合は単にdisplay: noneが与えられるだけ。

なのでソースを表示するとその違いがよくわかる。

created by Rinker