Vue

Vueのv-ifの使い方を初心者に分かるように解説してみた

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Vue の v-if の使い方を初心者に分かるように解説してみました。

⇨ Vue 記事の目次はこちら

v-if は、表示したり非表示にしたり切り替えるのが超簡単

v-if は、true と false を切り替えるだけで、表示したり、非表示にすることができます。

表示する方法

<div v-if="true">表示する</div>

true なら表示されます。

非表示にする方法

<div v-if="false">表示しない</div>

基本的にはこれだけの話です。

これ以降の話は、実際に実装するとしたらどうなるか?という話になります。

 表示と非表示を着替えたいとき

まず、前述でやった、True と False を変数で表現します。

<template>
  <div v-if="isView">表示する</div>
</template>

<script>
  export default {
    data() {
      return {
        isView: true
      };
    }
  };
</script>

これは、「isView」という変数で true と表現して表示されています。

では、false にしてみましょう。

<script>
  export default {
    data() {
      return {
        isView: false
      };
    }
  };
</script>

非表示になりました。

つまり、この変数を書き換えるだけで、表示したり、非表示にしたりできるようになりました。

true と false を書き換える関数を書く

<script>
  export default {
    data() {
      return {
        isView: false
      };
    },
    methods: {
      showView() {
        this.isView = true;
      }
    }
  };
</script>

showView()という関数で、isView を true に書き換える関数を作りました。

また、isView は初期状態で false なので非表示の状態です。

showView()関数を動かすボタンを設置する

<template
  ><div>
    <div v-if="isView">表示する</div>
    <button @click="showView">ボタン</button>
  </div>
</template>

@click はクリックイベントを付与することができるものです。

「v-on:click」と同じです。

ボタンを押してみましょう。「表示する」が表示されたら OK です。

表示されたり、非表示になったりを切り替えたい

ようは、ボタンを押したら、True になったり False になったり、切り替えるように実装します。

ここまでできていれば簡単で、関数のところを変えます。

    methods: {
      //できるだけ関数名は分かりやすくつけたいので、仕様が変わったら関数名を変える
      toggleIsView() {
        this.isView = !this.isView; //tureならfalseに、falseならtrueに変えます。
      }
    }

最終形

<template
  ><div>
    <div v-if="isView">表示する</div>
    <button @click="toggleIsView">ボタン</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isView: false
      };
    },
    methods: {
      toggleIsView() {
        this.isView = !this.isView;
      }
    }
  };
</script>

ボタンを押したら、表示されたり、消えたりするようになりました。

v-show との違い

v-show との違いは、表示される時、つまり true になったときにレンダリングされるということです。

v-show はシンプルに「非表示」なのに対して、v-if は検証 ⇨elements で確認すると、タグ自体が存在しなくなります。

つまり、条件によって、レンダリングされるということです。

特段理由なければ、v-if 使っておけば良いと思います。

別のパターンの条件の書き方

最初にやったパターンは、true と false を変えることによって、表示・非表示を切り替えましたが、それ以外にも書き方があります。

<div v-if="number === 1">1のとき表示する</div>

このように、if 文と同じように書くことができます。

<div v-if="text === 'テキスト'">「テキスト」のとき表示する</div>

直接 if 文を書くことができます。場合によっては計算式も書けます。

<div v-if="num * 2 > 10">「num*2」が10より大きいときに表示する</div>

まとめ

以上です。

誰かの参考になればと思います。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは!