Vue implementiert das digitale Tausendertrennzeichenformat global

In diesem Artikelbeispiel wird der spezifische Code für Vue zur globalen Implementierung des Tausendertrennzeichenformats zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Was bedeutet das? Wenn wir Daten auf der Seite rendern müssen, zum Beispiel 88888, müssen wir sie in einem leicht lesbaren Format anzeigen, 88.888, auf Tausendstel genau.

Was ich derzeit mache, ist, einen Filter in Vue zu schreiben und alle Daten mit diesem Filter zu filtern.

Da es sich hierbei um relativ große Datenmengen handelt, habe ich diesen Filter global eingebunden, um nicht auf jeder Seite erneut darauf verweisen zu müssen.

Implementierung des Konvertierungscodes

Erstellen Sie zunächst eine Datei numberToCurrency.js, um die Konvertierungsfunktion des Tausendertrennzeichens von Zahlen zu implementieren.

Exportfunktion NummerZuWährungsnummer(Wert) {
  wenn (!Wert) return 0
  // Den ganzzahligen Teil abrufen const intPart = Math.trunc(value)
  // Ganzzahliger Teil verarbeiten, erhöhen,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // Vordefinierter Dezimalteil let floatPart = ''
  //Den Wert in Dezimal- und Ganzzahlteile kürzen const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // Es gibt einen Dezimalteil floatPart = valueArray[1].toString() // Hol den Dezimalteil return intPartFormat + '.' + floatPart
  }
  returniere intPartFormat + floatPart
}

Okay, das ist erreicht. Wenn es andere Anforderungen gibt, muss der spezifische Konvertierungscode natürlich entsprechend der tatsächlichen Situation geändert werden.

Als nächstes folgt das Zitat.

Referenz-Mount global

Importieren Sie die Filterdatei jetzt in die Datei main.js und mounten Sie sie global.

importiere { ZahlZuWährungNr } aus '@/utils/ZahlZuWährung'
// Konfigurieren Sie den globalen Filter, um das digitale Tausendstelformat zu implementieren Vue.filter('numberToCurrency', numberToCurrencyNo)

Das ist alles, und dann können Sie es dort verwenden, wo Sie konvertieren müssen.

verwenden

Wenn Sie ihn verwenden, ist er derselbe wie der normale Filter.

<p class="num color1">{{riskAll| numberToCurrency}}</p>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.