Vue.jsで名前の表示/非表示を切り替える

はじめに

ボタンを押すと画面上にある名前の表示と非表示の切り替えができるプログラムを書いていきます。

ソースコード

全体のソースコードは以下の通りになります。（headタグやvueの読み込み箇所は省きます。）

HTMLファイルに書くソースコード

        <div id="app">
            <button @click="toggleBtn">クリックしてね</button>
            <p v-if="show">
                {{name}}
            </p>
        </div>

jsファイルに書くソースコード

var app = new Vue({
    el: "#app",
    data: {
        name: "Naoki",
        show: true,
    },
    methods: {
        toggleBtn: function () {
            this.show = !this.show;
        },
    },
});

ソースコードの解説

コードを書く順番で見ていきます。

条件分岐で名前を表示させる

　　　　<!-- 条件分岐 -->
       <p v-if="show">　
           {{name}}　<!-- nameの出力 -->
       </p>

showがtrueの場合、nameのデータが出力されます。

//保持しているデータ
    data: {
        name: "Naoki",
        show: true,
    },

nameに"Naoki"という文字データとshowにブーリアン型の true が入っている状態です。

ここでの処理内容はv-if="show"で条件分岐が行われ、今のshowのデータの中身はtrueで条件を満たしているので、nameに入っている"Naoki"という文字データが画面上に出力されることになります。
※コメント欄に補足説明があるので、よろしければご覧ください。

クリックで名前の表示/非表示を切り替える

<!-- クリックイベントでの関数の呼び出し -->
<button @click="toggleBtn">クリックしてね</button>

ボタンをクリックするとtoggleBtnの処理が呼び出されます。

// 関数の設定
    methods: {
        toggleBtn: function () {
            this.show = !this.show;
        },
    },

toggleBtnが呼び出されると、反転したshowがshowに代入されます。
ちなみに、thisというのは、jsファイルのappを指しています。

ここでの処理内容は、ボタンをクリックするとtoggleBtnの処理が呼び出されて、showデータのtrueとfalseが切り替わる仕組みになっています。この切り替えによって、名前の表示/非表示ができるようになるというわけです。

おわりに

はじめてQiitaに記事を書いたのですが、こんなに簡単な処理内容でも文字にして説明するとなると全然スムーズにいかず、かなり頭を使いました。人に教えることに慣れていないので、これからもっと練習して人に教えるスキルとプログラミングスキルを向上させていきたいと思います。