Detaillierte Erklärung zur Verwendung des in Vue.js implementierten Kalender-Plugins

*{
     Rand: 0;
     Polsterung: 0;
     -webkit-box-sizing: Rahmenbox;
     -moz-box-sizing: Rahmenbox;
     Box-Größe: Rahmenbox;
        }
        #app{
            Breite: 1000px;
            Rand: 10px automatisch;
        }
        .Kalander{
            Breite: 1000px;
        }
        .Kalendertabelle{
            Breite: 1000px;
        }
        .Kalendertabelle,th,tr,td{
            Rahmen: 1px durchgezogen #333333;
            Rahmen-Zusammenbruch: Zusammenbruch;
        }
        .Kalender td{
            Höhe: 100px;
            vertikale Ausrichtung: oben;
            Textausrichtung: links;
            Polsterung: 5px 0 0 5px;
            Schriftgröße: 13px;
        }
        .Kalender td.cur{
            Farbe: rot;
        }

<div id="app">
    <div Klasse="Kalender">
        <Tabelle>
            <Beschriftung>
                <Wählen Sie v-Modell.Nummer="Jahr">
                    <option v-for="i von 490">{{i+1969}}</option>
                </Auswählen>
                <select v-model.number="Monat">
                    <option v-for="i von 12">{{i}}</option>
                </Auswählen>
            </caption>
            <Kopf>
            <tr>
                <th>Sonntag</th>
                <th>Montag</th>
                <th>Dienstag</th>
                <th>Mittwoch</th>
                <th>Donnerstag</th>
                <th>Freitag</th>
                <th>Samstag</th>
            </tr>
            </thead>
            <tbody>
            <!--index beginnt bei 0 und i beginnt bei 1-->
            <tr v-for="(a,index) von Kalenderlänge / 7" >
                <td v-for="i von 7" :class="{cur:calender[index * 7 + (i - 1)].cur }">{{calender[index * 7 + (i - 1)].fullDay}}</td>
            </tr>
            </tbody>
        </Tabelle>
    </div>
</div>

var vm = neuer Vue({
        el:'#app',
        Daten:{
            Jahr: 2018,
            Monat:1
        },
        berechnet:{
            Kalander(){
                var arr = [];

                //neue Daten haben drei Parameter: 1. Jahr 2. Monat 3. Der Standardwert ist 1. Wenn er 0 ist, bedeutet dies den letzten Tag des vorherigen Monats – die ersten zwei Tage 3. übermorgen var nowMonthLength = new Date(this.year,this.month,0).getDate();
                var nowMonthFirstWeek = neues Date(dieses.Jahr,dieser.Monat-1).getDay();
                var lastMonthLength = neues Datum (dieses Jahr, dieser Monat-1,0).getDate();
                console.log('Dieser Monat hat:' + nowMonthLength);
                console.log('Erster Tag dieses Monats' + nowMonthFirstWeek);
                console.log('Länge des letzten Monats' + letzteMonatslänge);

                // dieser.Monat = parseInt(dieser.Monat);
                //Welcher Monat ist der vorherige Monat jedes Monats? var pmonth = this.month == 1 ? 12 : this.month - 1;
                //Vorheriges Jahr var pyear = this.month == 1 ? this.year - 1 :this.year;
                //Nächster Monat var nmonth = this.month == 12 ? 1 : this.month + 1;
                //Nächster Monat var nyear = this.month == 12 ? this.year + 1 : this.year;
                //Funktion zum Auffüllen von Nullen // function toTwo(n) {
                // gebe n < 10 zurück? '0' + n : n;
                // }
                Funktion build(n) {
                    gibt n.toString().Länge > 1 zurück? n.toString() : '0' + n.toString();
                }
                // Die letzten Tage des letzten Monats hinzufügen while(nowMonthFirstWeek--){
                    arr.unshift({
                        Tag:letzteMonatslänge,
                        aktuell:wahr,
                        ganzerTag: `${pyear}-${buling(pmonth)}-${buling(lastMonthLength)}`
                    });
                    letzteMonatslänge--
                }
                Konsole.log(arr);

                //Tage dieses Monats var _a = 1;
                während(jetztMonatslänge--){
                    arr.push({
                        Tag:_a,
                        aktuell:false,
                        ganzerTag: `${dieses.Jahr}-${buling(dieser.Monat)}-${buling(_a)}`
                    });
                    _a++
                }

                //Nächsten Monat abschließen var nextLength = arr.length > 35 ? 42 - arr.length : 35 - arr.length;
                _a = 1;
                während (nächsteLänge--){
                    arr.push({
                        Tag:_a,
                        aktuell:wahr,
                        ganzerTag: `${nyear}-${buling(nmonth)}-${buling(_a)}`
                    });
                    _a++
                }
                Rückflug an;
            }
        }
    })