vue 表示/非表示を切り替える！

vue.jsの表示/非表示切り替えについてです！

v-showとv-ifについて書いていきます。

サンプル

作成したサンプルは、GitHubにアップしています。

github.com

ソースコード

今回サンプルとして、ボタンとチェックボックスと、2つのテキストを用意しました。

どちらも押すことで、下の要素がvueディレクティブの効果で、表示/非表示が切り替わります。

<template>
  <div class="content">
    <h2>@click, v-if, v-show</h2>

    <!-- 切替ボタン -->
    <button @click="click">toggle show</button>

    <!-- 切替チェック -->
    <input type="checkbox" id="isShowChk" v-model="show">
    <label for="isShowChk">{{ show }}</label>

    <!-- falseでdisplay:noneとなる -->
    <p v-show="show">item1</p>
    <!-- falseで要素が消される -->
    <p v-if="show">item2</p>
  </div>
</template>

ボタンとチェックは1つの変数にバインディングしているため、連動しています。

2つある意味は、共通データで操作できるのかな？と思い作りました。

想像通りどちらを押しても、現状からトグルしました。

<script>
export default {
  name: "Test",
  data() {
    return {
      show: "true",
    }
  },
  methods: {
    click(event) {
      this.show = !this.show;
    }
  },
};
</script>

v-show

v-showは、displayの操作を行います。

条件	状態
true	通常通り表示
false	「display:none」を付与

v-if

v-ifは、対象のタグそのものを削除します。

ソースの状態を見ると、コメントに置き換えられて、存在そのものが消えています。

参考

コチラを参考にしました。ありがとうございました！

noumenon-th.net

あとがき

vue.jsの表示/非表示切り替えについてでした！

初めてC言語でプログラミングを習ったとき、if文を習って

「これあれば何でもできるんじゃね？」

と思ったときのような感覚に似たようなものを感じました(笑)

表示制御ができるということは、簡単な何かは作れそうですよね。