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
Lösung für den MySQL-Fehler „Jede abgeleitete Tabelle muss einen eigenen Alias haben“
MySQL meldet einen Fehler beim Ausführen einer Ab...
Samba-Serverkonfiguration unter Centos7 (tatsächlicher Kampf)
Samba Übersicht Samba ist eine kostenlose Softwar...
Lösung für das Problem, dass Centos8 Docker nicht installieren kann
Problem [root@zh ~]# [root@zh ~]# [root@zh ~]# yu...
WeChat-Miniprogramme ermöglichen nahtloses Scrollen
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie CSS-Stile und -Selektoren
Drei Möglichkeiten, CSS in HTML zu verwenden: 1. ...
Delegieren von Berechtigungen in Linux mit Sudo
Einführung in die Sudo-Autoritätsdelegierung su-S...
Warum gibt es das in JS?
Inhaltsverzeichnis 1. Nachfrage 2. Lösung 3. Die ...
Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen
Inhaltsverzeichnis Mathematische Objekte Gemeinsa...
Tutorial zur Verarbeitung statischer Ressourcen in Tomcat
Vorwort Alle Anfragen in Tomcat werden von Servle...
CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft
Die korrekte Verwendung der CSS-Float-Eigenschaft...
Detailliertes Tutorial zur Installation von MySQL 8.0.20 auf CentOS7.8
1. MySQL-Software installieren Laden Sie das offi...
Zusammenfassung der CJK-Zeichen (vereinheitlichte chinesische, japanische und koreanische Ideogramme) in Unicode
CJK ist die Abkürzung für CJK Unified Ideographs,...
Node.js erstellt ein einfaches Crawler-Case-Tutorial
Vorbereitung Zuerst müssen Sie nodejs herunterlad...
Was ist TypeScript?
Inhaltsverzeichnis 1. JavaScript-Probleme 2. Vort...
Detaillierte Erläuterung des MySQL Multi-Version Concurrency Control Mechanism (MVCC)-Quellcodes
Inhaltsverzeichnis 1. Einleitung 2. MVCC (Multi-V...