So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue
|
Bei der Verwendung von Vue zur Entwicklung von Projekten muss das Front-End häufig Datums- und Uhrzeitangaben berechnen, beispielsweise:
Empfehlen Sie eine leichte JavaScript-Bibliothek zur Verarbeitung von Uhrzeit und Datum: dayjs Es ist sehr praktisch, dieses Plug-In zu verwenden, um allgemeine Daten zu berechnen 1. Installieren Sie dayjs im Projekt. Der Befehl lautet: 2. Fügen Sie in main.js die folgenden beiden Codezeilen hinzu importiere dayjs von „dayjs“; Vue.prototype.dayjs = dayjs;
3. Verwenden Sie es direkt dort, wo es auf der Seite benötigt wird Das aktuelle Datum oder der Zeitstempel wird konvertiert . Nach dem Format folgt der Inhalt, den Sie formatieren möchten. **dayjs()** setzt keine Parameter in die Klammern. Standardmäßig wird das aktuelle Datum verwendet. Sie können auch einen Zeitstempel zur direkten Konvertierung angeben. (Hinweis: Wenn Sie den Datumswähler der Elementkomponente verwenden, erfordert dessen Wertformatattribut: |
| Komponenten | Dayjs (Format) | Element (Wertformat) |
|---|---|---|
| Jahr | JJJJ | JJJJ |
| Mond | MM | MM |
| Tag | DD | dd |
| Stunde | HH | HH |
| Punkt | mm | mm |
| Zweite | ss | ss |
Die Ausdrücke für Jahr und Tag sind leicht unterschiedlich und können leicht verwechselt werden.)
this.dayjs().format("JJJJ-MM-TT")
this.dayjs().format("JJJJ-MM-TT HH:mm")
this.dayjs(1614787200000).format("JJJJ-MM-TT HH:mm:ss")
2. Berechnen Sie das Start- und Enddatum einer Woche/eines Monats/eines Jahres. Die verwendeten Methoden sind startOf() und endOf() . Die Klammern können "Woche", "Monat" oder "Jahr" sein.
(PS: Das Hinzufügen eines Formats dient einer intuitiveren Darstellung)
this.dayjs().startOf("Woche");
this.dayjs().endOf("Woche").format("JJJJ-MM-TT");
this.dayjs().startOf("Monat").format("JJJJ-MM-TT");
this.dayjs("2021-02-09").endOf("Monat").format("JJJJ-MM-TT");
Berechnen Sie Daten, z. B. vor ein paar Tagen oder ein paar Tage später.
| Vorne (minus) | Nach (Hinzufügen) |
|---|---|
| subtrahieren(Parameter1, Parameter2) | add(Parameter1, Parameter2) |
| Parameter 1 | Nummer |
| Parameter 2 | Einheit ("Woche", "Monat", "Jahr") |
this.dayjs().subtract(3,'day').format("JJJJ-MM-TT")
this.dayjs().subtract(3,'month').format("JJJJ-MM-TT")
this.dayjs().add(12,'day').format("JJJJ-MM-TT")
this.dayjs('2021-03-12').add(45,'day').format("JJJJ-MM-TT")
5. Ermitteln Sie den Tag des Monats mit der Methode dayInMonth()
this.dayjs().daysInMonth();
this.dayjs("2021-02-09").daysInMonth();
this.dayjs("2021-01").daysInMonth();
6. Konvertieren Sie das normale Datum in einen Zeitstempel
dies.dayjs().unix()
dies.dayjs('2020-10-04').unix()
Zusammenfassen
Dies ist das Ende dieses Artikels darüber, wie Vue Dayjs verwendet, um allgemeine Daten zu berechnen. Weitere Informationen zur Berechnung allgemeiner Daten durch Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!
Das könnte Sie auch interessieren:
- Vue+element-ui fügt ein Beispiel für eine benutzerdefinierte Rechtsklick-Menümethode hinzu
- Erstellen Sie testpapierbezogene Funktionen basierend auf Vue und Element (Beispielcode).
- Eine kurze Erläuterung der schnellsten Möglichkeit zum Ändern der Standardeinstellung mit Elementui in Vue
- vue+element_ui lädt Dateien hoch und übergibt zusätzliche Parameter
- Erste Praxis von vue3.0+vue-router+element-plus
- element-plus, ein vue3.x-UI-Framework (erste Erfahrungen mit der Element-UI-Version 3.x)
- So erstellen Sie ein Projekt mit Vue3+elementui plus
- Vue-Element realisiert das Zusammenführen von Tabellenzeilendaten
- Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework
- Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen
<<: Linux/Mac MySQL-Befehlszeilenmethode zum Ändern des Passworts bei vergessenem Passwort
>>: Zusammenfassung der Ubuntu-Sicherungsmethoden (vier Typen)
Artikel empfehlen
So verwenden Sie Docker, um Containerressourcen zu begrenzen
Problem beim Gucken Angenommen, der IIS-Dienst st...
Detaillierte Erläuterung der drei Möglichkeiten zum Konfigurieren virtueller Nginx-Hosts (basierend auf Ports)
Nginx unterstützt drei Möglichkeiten zum Konfigur...
So migrieren Sie das Datenverzeichnis in Docker
Inhaltsverzeichnis Datenträgernutzung anzeigen Da...
Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code
1. Fügen Sie am Anfang des Stylesheets einen Komme...
Detaillierte Erklärung des Parsererror-Fehlerfalls in der JavaScript-Lösung in Ajax
Die ultimative Methode zur Lösung des Ajax-Parser...
Detailliertes Beispiel der CSS3-Boxschatteneigenschaft
CSS3 – Schatten hinzufügen (mithilfe von Boxschat...
So zeigen Sie den Startparameterbefehl „Docker Run“ an (empfohlen)
Verwenden Sie runlike, um die Docker Run-Startpar...
mysql-8.0.15-winx64 verwendet das Zip-Paket zur Installation und der Dienst wird sofort nach dem Start heruntergefahren
Die in diesem Beispiel verwendete MySQL-Version i...
Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt
1. Fügen Sie package.json hinzu "Haupt"...
MySQL-Gruppe durch Gruppieren mehrerer Felder
Bei täglichen Entwicklungsaufgaben verwenden wir ...
Der Unterschied zwischen method=post/get in Form
Das Formular bietet zwei Möglichkeiten zur Datenüb...
Mysql-Methode zum Kopieren einer Datenspalte einer Tabelle in eine Spalte einer anderen Tabelle
mysql kopiert eine Tabellenspalte in eine andere ...
JavaScript-Grundlagenreihe: Funktionen und Methoden
Inhaltsverzeichnis 1. Der Unterschied zwischen Fu...
Block- und Zeilenelemente, Sonderzeichen und Verschachtelungsregeln in HTML
Wenn wir die Verschachtelungsregeln grundlegender...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein...