Vue Date Format | DD/MM/YYYY

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Date Format DD-MM-YYYY</h3>
        <p>Date: {{today}}</p>
        <p>Formatted Date : {{ formattedToday }}</p>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    today: new Date(),
                    formattedToday: ''
                };
            },
            mounted() {
                this.formatDate();
            },
            methods: {
                formatDate() {
                    const yyyy = this.today.getFullYear();
                    let mm = this.today.getMonth() + 1; // Months start at 0!
                    let dd = this.today.getDate();

if (dd < 10) dd = '0' + dd;
                    if (mm < 10) mm = '0' + mm;

this.formattedToday = dd + '-' + mm + '-' + yyyy;
                }
            }
        });
    </script>
    <style>
        #app {
            margin: 0 auto;
            width: 600px;
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
                0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
        }
    </style>
</body>
</html>