こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsでクリックで要素を動的に切り替える方法をご紹介しています。

要素を動的に繰り替えるにはどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

v-if、v-elseについて

Vue.jsで要素を切り替える方法の1つとして、v-if、v-elseがあります。v-if条件がtrueであればDOMを生成し、falseであれば生成されません。v-elseはv-ifがfalseの場合にDOMが生成される構文です。こちらを利用して、クリックで要素を動的に切り替える処理を実装してみようと思います！

v-if、v-elseで動的に要素を切り替える

まずはHTMLから。

HTML

HTMLではidのelemSwitchをラッパーとし、その中にv-ifとv-elseを指定しています。buttonについている@clickはv-on:clickの省略した記述になります。buttonがクリックされた場合にスクリプトに指定しているmethodsの「active」が実行します。

<article id="elemSwitch">
    <button @click="active">Click Me!</button>
    <div v-if="isActive">最初に表示される要素</div>
    <div v-else>切り替え後に表示される要素</div>
</article>

JS

スクリプトでは、上記で指定したラッパーのelemSwitchを指定し、ボタンのクリックによってisActiveをトグルしています。isActiveがtrueのときはfalseを、falseのときはtrueとすることで要素が切り替わります。

var elemSwitch = new Vue({
    el: "#elemSwitch",
    data: {
        isActive: true
    },
    methods: {
        active: function () {
            this.isActive = !this.isActive;
        }
    }
});

DEMO

上記でご紹介した内容のデモになります！Firefoxの開発ツールやChromeの検証で切り替わる部分を見ていただきたいのですが、v-if、v-elseに指定した要素のどちらかしかDOMは生成されていないかと思います。

See the Pen 【Vue.js】Element Switch by ryoy (@intotheprogram) on CodePen.

v-if、v-elseについて

v-if、v-elseの詳細については下記のページが最も参考になるかと思います。

https://jp.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

Vue.jsは日本語ドキュメントが充実していて、学習するのにとても便利ですね。今後もお世話になり続けます！

以上、Vue.jsでクリックで要素を動的に切り替える方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら