Vue zeigt dynamisch den Wochentag an, der dem Datum entsprechend dem ausgewählten Monat entspricht

Wir, die bescheidenen Programmierer, müssen immer noch singen: „Sie und ich sind alle Sterbliche, in dieser Welt geboren, den ganzen Tag beschäftigt, ohne einen Moment Ruhe zu finden. Da wir nicht unsterblich sind, sind wir dazu gezwungen, ablenkende Gedanken zu haben. Wir legen unsere Sorgen beiseite und stellen das Gehalt in den Mittelpunkt. Wie viele Männer sind kahl und fett und machen Tag und Nacht Überstunden, ohne eine Versicherung abzuschließen.“

Obwohl ich mich dagegen gewehrt habe, hat es nie funktioniert. Für die großen Bosse sind es ihre Träume, die wahr werden, für uns hingegen sind es unsere Träume, die dazu führen, dass man uns die Schuld gibt!

Nach all den Beschwerden muss ich immer noch die Schuld auf mich nehmen, Überstunden machen und weiter programmieren! ! !

Kommen Sie, lassen Sie uns den im Titel genannten Effekt erzielen.

Das Prinzip ist eigentlich ganz einfach. Zuerst benötigen Sie ein Eingabefeld, um Jahr und Monat auszuwählen. Hier verwende ich die DatePicker-Datumsauswahlkomponente von Element. Ich werde nicht näher auf die Verwendung eingehen. Sehen Sie sich die API von Element selbst an.

Anschließend wird jeder Tag des aktuellen Monats dynamisch entsprechend dem ausgewählten Monat angezeigt. Dabei kommen zwei Methoden des Datumsobjekts zum Einsatz: setMonth und setDate.

Mit der Methode setMonth(month, day) wird der Monat eingestellt. Die Parameter werden wie folgt beschrieben:
Monat: erforderlich. Ein numerischer Wert, der den Monat darstellt, zwischen 0 (Januar) und 11 (Dezember).
Tag: Optional. Ein numerischer Wert zwischen 1 und 31, der den Tag des Monats in der Ortszeit darstellt. Vor der Standardisierung von EMCAScript wurde dieser Parameter nicht unterstützt.

Mit der Methode setDate(day) wird ein Tag im Monat festgelegt. Die Parameter sind wie folgt:
Tag: erforderlich. Ein numerischer Wert (1 bis 31), der den Tag des Monats darstellt.

Der spezifische Code lautet wie folgt:

<Vorlage>
 <div>
  <el-date-picker v-model="Monat" Typ="Monat" @change="Monatsänderung" Platzhalter="Monat auswählen" />
  <p>
   Jeder Tag im Monat:
   <span v-for="Artikel in everyDay" :key="Artikel" style="margin-right:10px;">{{Artikel}}</span>
  </p>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Daten() {
  zurückkehren {
   Monat: "",
   täglich: []
  };
 },
 montiert(){
  let date = neues Date(), Monat = date.getMonth();
  dies.getEveryDay(Datum, Monat);
 },
 Methoden: {
  Monatsänderung(Datum) {
   dies.getEveryDay(Datum, Datum.getMonth());
  },
  getEveryDay(Datum, Monat) {
   //Monat festlegen date.setMonth(month + 1);
   //Einen Tag im Monat festlegen – wenn der Wert auf Null gesetzt wird, ist der Tag des Datums der letzte Tag im Monat (z. B. ist der Februar der 28. oder 29., andere Monate sind der 30. oder 31.), was für die folgende Schleife praktisch ist: date.setDate(0);
   lass dayArry = [];
   //Einen Tag im Monat abrufen let day = date.getDate();

   für (sei i = 1; i <= Tag; i++) {
    date.setDate(i); //Wenn Sie nur jeden Tag des aktuell ausgewählten Monats abrufen möchten, benötigen Sie date.setDate(i) nicht, sondern nur dayArry.push(i), wobei date.setDate(i) jeden Tag des aktuellen Monats festlegt dayArry.push(i + ' ' + this.getWeekday(date.getDay())); //Jeden Tag des ausgewählten Monats und den Wochentag}

   dies.jedenTag = dayArry;
  },
  getWeekday(day){
   return ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"][Tag];
  },
 }
};
</Skript>

Der Anzeigeeffekt ist wie folgt:

Beachten Sie, dass der von der Methode getMonth zurückgegebene Wert bei 0 beginnt. Wenn Sie den richtigen Monat erhalten möchten, müssen Sie daher 1 zum zurückgegebenen Wert addieren. Bei setDate gibt es eine Besonderheit, die ausführlich erklärt werden muss. setDate wird verwendet, um einen bestimmten Tag im Monat festzulegen. Beispielsweise legt setDate(1) den ersten Tag eines Monats fest und setDate(10) den zehnten Tag eines Monats. Aus bekannten Gründen kann ein Monat jedoch 28, 29, 30 oder 31 Tage haben. Wenn wir Code schreiben, um selbst zu beurteilen, ist das zu umständlich. Hier zeigt sich die Großartigkeit von setDate(0) (der offizielle setDate-Parameter liegt zwischen 1 und 31, und 0 wird rücksichtslos aufgegeben. Bruder Ling singt in dieser Zeit traurig: Rücksichtslose Welt, rücksichtslos du, du behandelst mich wie Müll in deinen Händen). setDate(0) wird auf den letzten Tag des Monats eingestellt, unabhängig davon, ob dieser Tag der 28., 29., 30. oder 31. ist (Bruder Ling schreit in dieser Zeit: Früher hast du mich ignoriert, aber jetzt kannst du mich dir nicht mehr leisten!), und dann verwenden wir die Methode getDate, um den letzten Tag des Monats abzurufen, den wir eingestellt haben. Schließlich fügen wir eine for-Schleife ein und fügen jeden Tag in ein Array ein, und schon können wir es einen Tag nennen!

Natürlich können wir auch nicht den Wochentag anzeigen, der zu jedem Tag gehört, sondern nur die beiden Tage, die Samstag und Sonntag entsprechen, in Rot anzeigen. Der Code muss nur geringfügig geändert werden:

<Vorlage>
 <div Stil="Rand:50px;">
  <el-date-picker v-model="Monat" Typ="Monat" @change="Monatsänderung" Platzhalter="Monat auswählen" />
  <p Stil="Rand oben:10px;">
   Jeder Tag im Monat:
   <span v-for="Artikel in everyDay" :key="Artikel" style="margin-right:10px;" v-html="Artikel"></span>
  </p>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Daten() {
  zurückkehren {
   Monat: "",
   täglich: []
  };
 },
 montiert(){
  let date = neues Date(), Monat = date.getMonth();
  dies.getEveryDay(Datum, Monat);
 },
 Methoden: {
  Monatsänderung(Datum) {
   dies.getEveryDay(Datum, Datum.getMonth());
  },
  getEveryDay(Datum, Monat) {
   //Monat festlegen date.setMonth(month + 1);
   //Einen Tag im Monat festlegen – wenn der Wert auf Null gesetzt wird, ist der Tag des Datums der letzte Tag im Monat (z. B. ist der Februar der 28. oder 29., andere Monate sind der 30. oder 31.), was für die folgende Schleife praktisch ist: date.setDate(0);
   lass dayArry = [];
   //Einen Tag im Monat abrufen let day = date.getDate();

   für (sei i = 1; i <= Tag; i++) {
    date.Datum setzen(i);
    wenn(date.getDay() == 0 || date.getDay() == 6){
     TagArry.push('<i class="red">' + i + '</i>');
    }anders{
     TagArry.push(i);
    }
   }

   dies.jedenTag = dayArry;
  },
 }
};
</Skript>
<Stil>
.red{Farbe:rot;Schriftart:normal;}
</Stil>

Der Anzeigeeffekt ist wie folgt:

Autor: Xiaohuai

Quelle: http://tnnyang.cnblogs.com

Oben sind die Details, wie Vue den Wochentag dynamisch entsprechend dem ausgewählten Monat anzeigt. Weitere Informationen dazu, wie Vue den Monat auswählt, um das Datum dynamisch anzuzeigen, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!