【Vue.js】クリックで要素を動的に切り替える

こんにちは、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;
        }
    }
});