Für ein einfaches Beispiel: Textfeld zur Eingabe von Währungsdaten. Die Anforderung besteht darin, Benutzereingaben im Format "$ 1,234,567" anzuzeigen und den Dezimalpunkt zu entfernen.
Ich habe die vue-Direktive versucht. Die Aktualisierungsmethode der Direktive wird nicht aufgerufen, wenn die Benutzeroberfläche aufgrund anderer Steuerelemente aktualisiert wird. Der Wert in der Textbox wird also auf den ohne Formatierung zurückgesetzt.
Ich habe auch v-on versucht: Event-Handler ändern. Aber ich weiß nicht, wie man im Event-Handler eine globale Funktion aufruft. Es ist nicht empfehlenswert, in jedem Vue-Objekt eine Währungsumrechnungsmethode zu erstellen.
Was ist nun die Standardformatierung in Vue 2.0?
Grüße
Bitte überprüfen Sie dieses funktionierende jsFiddle-Beispiel: Ссылка
In diesem Beispiel ist die formatierte Währungseingabe eine Komponente an sich, die v-model genau wie jedes andere Formularelement in Vue.js verwendet. Sie können diese Komponente folgendermaßen initialisieren:
my-currency-input ist eine in sich geschlossene Komponente, die den Währungswert formatiert, wenn das Eingabefeld inaktiv ist. Wenn der Benutzer den Cursor eingibt, wird die Formatierung entfernt, damit der Benutzer den Wert bequem ändern kann.
So funktioniert es:
Die Komponente my-currency-input hat einen berechneten Wert - displayValue , der die Methoden get und set definiert hat. Wenn in der Methode get das Eingabefeld nicht aktiv ist, gibt es den formatierten Währungswert zurück.
Wenn Benutzer in das Eingabefeld eingeben, gibt die set -Methode der displayValue berechnete Eigenschaft den Wert unter Verwendung von $emit aus und benachrichtigt die Elternkomponente über diese Änderung.
Referenz zur Verwendung von v-model für benutzerdefinierte Komponenten: Ссылка
Hier ist ein funktionierendes Beispiel: Ссылка
Es funktioniert, indem Sie die Eingabezeichenfolge (den Wert Ihrer Währung) während der Ereignisse "Fokus aus" und "Fokus ein" wie folgt ändern:
%Vor% Wenn Sie den Cursor in das Eingabefeld setzen, wird this.currencyValue benötigt und in ein einfaches Format konvertiert, damit der Benutzer es ändern kann.
Nachdem der Benutzer den Wert eingegeben und an anderer Stelle geklickt hat (wegfokussieren), wird this.currencyValue nach dem Ignorieren nicht numerischer Zeichen neu berechnet, und der Anzeigetext wird wie gewünscht formatiert.
Der Währungsformatierer (reg exp) ist ein Copy-Paste von hier: Wie kann ich Zahlen als Geld in JavaScript formatieren?
Wenn Sie den Dezimalpunkt nicht wie erwähnt verwenden möchten, können Sie this.currencyValue.toFixed(0) in der Methode focusOut verwenden.
Tags und Links vue.js