Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Formatierungsmethode des Vue-Filters

Detaillierte Erläuterung der Formatierungsmethode des Vue-Filters

May 09, 2018 am 09:28 AM
格式化 详解 过滤器

这次给大家带来Vue过滤器格式化方法详解,Vue过滤器格式化的注意事项有哪些,下面就是实战案例,一起来看一下。

前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断。有些话也不必多说,既然要求如此,实现呗。

作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了。我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个。话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了)。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Vue数字过滤器逢三一断</title>
 </head>
 <body>
  <p id="app">
   <h4>说明:这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4>
   <input type="number" v-model="num" />
   <p>{{num|NumFormat}}</p>
  </p>
 </body>
 <script type="text/javascript" src="vue.js"></script>
 <script>
  Vue.filter('NumFormat', function(value) {
   if(!value) return '0.00';
   var intPart = Number(value).toFixed(0); //获取整数部分
   var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
   var floatPart = ".00"; //预定义小数部分
   var value2Array = value.split(".");
   //=2表示数据有小数位
   if(value2Array.length == 2) {
    floatPart = value2Array[1].toString(); //拿到小数部分
    if(floatPart.length == 1) { //补0,实际上用不着
     return intPartFormat + "." + floatPart + '0';
    } else {
     return intPartFormat + "." + floatPart;
    }
   } else {
    return intPartFormat + floatPart;
   }
  })
  var app = new Vue({
   el: "#app",
   data: {
    num: 0
   },
  })
 </script>
</html>
Nach dem Login kopieren

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Angular集成三方UI框架、控件使用详解

源生Node.js注册邮箱激活说明详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Formatierungsmethode des Vue-Filters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So formatieren Sie das Laufwerk C mit dem DOS-Befehl So formatieren Sie das Laufwerk C mit dem DOS-Befehl Feb 19, 2024 pm 04:23 PM

Der DOS-Befehl ist ein im Windows-Betriebssystem verwendetes Befehlszeilentool, mit dem verschiedene Systemverwaltungsaufgaben und -vorgänge ausgeführt werden können. Eine der häufigsten Aufgaben ist das Formatieren der Festplatte, einschließlich des Laufwerks C. Das Formatieren des Laufwerks C ist ein relativ gefährlicher Vorgang, da dadurch alle Daten auf dem Laufwerk C gelöscht und das Dateisystem neu initialisiert werden. Bevor Sie diesen Vorgang durchführen, stellen Sie sicher, dass Sie wichtige Dateien gesichert haben und sich darüber im Klaren sind, welche Auswirkungen die Formatierung auf Ihren Computer haben wird. Das Folgende wird in der DOS-Befehlszeile formatiert

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

Enthüllte Geheimnisse der Methoden zur Wiederherstellung des Mobiltelefonformats (Fehlfunktion des Mobiltelefons? Keine Sorge) Enthüllte Geheimnisse der Methoden zur Wiederherstellung des Mobiltelefonformats (Fehlfunktion des Mobiltelefons? Keine Sorge) May 04, 2024 pm 06:01 PM

Heutzutage werden wir unweigerlich auf einige Probleme stoßen, wie z. B. die Unfähigkeit, das Telefon einzuschalten, oder Verzögerungen, wie z. B. einen Systemabsturz, aber während der Nutzung sind Mobiltelefone zu einem unverzichtbaren Teil unseres Lebens geworden. Wir sind oft ratlos und manchmal gibt es keine Lösungen für diese Probleme. Um Ihnen bei der Lösung von Mobiltelefonproblemen zu helfen, stellt Ihnen dieser Artikel einige Methoden zur Wiederherstellung des Mobiltelefonformats und zur Wiederherstellung des normalen Betriebs Ihres Telefons vor. Sichern Sie Daten – schützen Sie wichtige Informationen wie Fotos und Kontakte vor dem Verlust während des Formatierungsvorgangs. Bevor Sie Ihr Telefon formatieren, sollten Sie zunächst daran denken, wichtige Daten und Dateien auf Ihrem Telefon zu sichern. Um die Datensicherheit zu gewährleisten oder Dateien an einen Cloud-Speicherdienst zu übertragen, können Sie sie sichern, indem Sie eine Verbindung zu einem Computer herstellen. Nutzen Sie die integrierte Wiederherstellungsfunktion des Systems – ganz einfach

Wird das Formatieren eines Laptops ihn schneller machen? Wird das Formatieren eines Laptops ihn schneller machen? Feb 12, 2024 pm 11:54 PM

Wird das Formatieren eines Laptops ihn schneller machen? Wenn Sie Ihren Windows-Laptop formatieren möchten, sich aber fragen, ob er dadurch schneller wird, hilft Ihnen dieser Artikel dabei, die richtige Antwort auf diese Frage zu finden. Wird das Formatieren eines Laptops ihn schneller machen? Es gibt viele Gründe, warum Benutzer ihre Windows-Laptops formatieren. Der häufigste Grund ist jedoch die langsame Leistung oder Geschwindigkeit Ihres Laptops. Durch das Formatieren eines Laptops werden alle auf dem Laufwerk C oder der Festplattenpartition, auf der das Windows-Betriebssystem installiert ist, gespeicherten Daten vollständig gelöscht. Daher wird sich jeder Nutzer diesen Schritt zweimal überlegen, insbesondere wenn es um die Leistung des Laptops geht. Dieser Artikel hilft Ihnen zu verstehen, ob die Formatierung Ihres Laptops die Geschwindigkeit beschleunigt. Das Formatieren Ihres Laptops hilft

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Feb 22, 2024 pm 08:21 PM

Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen

Welche Methoden der HTML-Formatierung gibt es? Welche Methoden der HTML-Formatierung gibt es? Mar 08, 2024 am 09:53 AM

HTML-Formatierungsmethode: 1. Verwenden Sie Online-HTML-Formatierungstools. 2. Verwenden Sie die mit dem Code-Editor gelieferten HTML-Formatierungstasten, z. B. Umschalt + Alt + F in Visual Studio Code. 3. Verwenden Sie Plug-Ins, z. B. in Sublime Text-HTML/CSS/JS-Prettify-Plugin 4. Verwenden Sie Befehlszeilentools wie HTML Tidy. 5. Manuelle Formatierung gemäß Codierungsstandards und -gewohnheiten.

See all articles