More than 1 year has passed since last update.

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

Posted at 2024-02-12

初めに

Vue.jsには条件付きレンダリングとしてv-ifとv-showが存在する。どちらも条件によって要素をレンダリングするが，処理内容に違いがある。

レンダリング
あるデータを処理または演算することで画像や映像を表示させること

ブロックを条件に応じてレンダリングしたい場合に使用し，ディレクティブの式が真を返す場合のみレンダリングされる。他にv-elseやv-else-ifも使用することで，より詳細な条件で要素を出し分けすることができる。

HTML

      <section id="app">
        <p v-if="goals">goals</p>
        <p v-else>No goals</p>
      </section>

Javascript

Vue.createApp({
    data() {
        return {
         goals:''
        }
      },  
}).mount('#app')

Javascriptではgoalsに''(ブランク)を指定しているため，v-else要素が画面に表示される。
この時，v-if要素は検証ツールに表示されていないことが分かる。

使用方法はv-ifと同様。条件に該当すれば要素を画面に表示する。
ただ，v-else-ifやv-elseに相当するものはないので，複数の条件文を作りたい場合はv-showを複数使用する必要がある。

HTML

      <section id="app">
        <p v-show="goals">goals</p>
        <p v-show="!goals">No goals</p>
      </section>

Javascript

Vue.createApp({
    data() {
        return {
         goals:''
        }
      },  
}).mount('#app')

Javascriptではgoalsに''(ブランク)を指定しているため，2つ目のv-show要素が画面に表示される。
この時，1つ目のv-show要素は検証ツールにてdispaly:none;となっていることが分かる。

v-ifの方が切り替えコストが高いため，頻繁に切り替える場合はv-showを選ぶと良い。
逆に条件が変わることがほどんど無い場合はv-ifを選ぶと良い。