【Vue.js】 v-if と v-show の違い

Tweet

Category JavaScript / Tagged vue 2017/02/13

問題

v-if と v-show って、見た目に表示/非表示される以外にどこが違うの？？

答え

● v-show は、要素の表示/非表示する。

display:block/none してもらう感じ。

● v-if は、要素の有無が変わる。

append したり、remove してもらう感じ。

（else ができる点も違うけど）

なので、CSSでfirst-childに適用したいと思ったとき、隠してくれるからと言って v-show を使っていると、非表示になったfirst-childに適用されたりする。

要素としてはそこにいて、表示/非表示したかったら v-show。

要素としてもようがないときはそこにいてほしくないときは v-if。