VueJS Navigation

VueJS Navigation

// HTML

<div id="app">
    <button @click='homeButton'>HOME</button>
    <button @click='menuButton'>MENU</button>
    <button @click='contactButton'>CONTACT</button>
    <div :style="{display: homeMode}">
        <h2>Home</h2>
        <p>Home Page</p>
    </div>
    <div :style="{display: menuMode}">
        <h2>Menu</h2>
        <p>Menu Page</p>
    </div>
    <div :style="{display: contactMode}">
        <h2>Contact</h2>
        <p>Contact Page</p>
    </div>
</div>

// Vue Javascript

// Magnific Popup

$(document).ready(function() {

    $('.popup-youtube').magnificPopup({type: 'iframe'});

});

// VueJS

new Vue({
    el: '#vue-app',
    data: {
        homeMode: 'block',
        menuMode: 'none',
        contactMode: 'none'
    },
    methods: {
        homeButton: function () {
            return this.homeMode = 'block',
                this.menuMode = 'none',
                this.contactMode = 'none'
        },
        menuButton: function () {
            return this.homeMode = 'none',
                this.menuMode = 'block',
                this.contactMode = 'none'
        },
        contactButton: function () {
            return this.homeMode = 'none',
                this.menuMode = 'none',
                this.contactMode = 'block'
        }
    }
});