Vue steuert die Methode, dass Benutzer nur positive Ganzzahlen eingeben können

Bei der Arbeit ist ein Problem aufgetreten. Die Terminalschnittstelle kann nur positive Ganzzahldaten empfangen. Chinesisch, Dezimalpunkte, Sonderzeichen und andere Datenformen melden Fehler

Nach einigem Suchen habe ich eine Methode gefunden, die verwendet werden kann

Fügen Sie Regex-Steuerelemente inline hinzu, etwa so:

 <el-input 
  v-model="dataList"
  style="width: 80%"
  placeholder="请输入数据"
  oninput="value=value.replace(/[^\d]/g,'')"
 ></el-input>

Diese Methode kann tatsächlich den gewünschten Effekt erzielen, und alle nicht positiven Ganzzahlinhalte können nicht eingegeben werden. Im Test wurde jedoch festgestellt, dass diese Methode von Zeit zu Zeit von der V-Modell-Bindung getrennt wird, wodurch die Funktion nicht verfügbar ist.

 Deshalb habe ich die Idee dieser Methode geändert und sie wie folgt geändert:

watch: {
    dataList (val) {
      this.dbPort = val.replace(/\D/g, '')
    }
  },

Die Verwendung von Watch zur Datenüberwachung kann auch den gewünschten Effekt erzielen, und nach dem Testen gibt es kein Phänomen, das nicht an das Modell gebunden werden kann.

Hinweis: Diese Methode eignet sich nur für die Steuerung einzelner Daten oder für mehrere Daten mit unterschiedlichen Steuerbedingungen. Es wird nicht empfohlen, auf diese Weise für mehrere Daten mit denselben Steuerbedingungen zu schreiben, da dies Zeitverschwendung wäre.

 Ein Front-End-Xiaobai widmet sich dem Teilen der bei der Arbeit aufgetretenen Probleme. Wenn etwas nicht stimmt, korrigieren Sie mich bitte. Wenn es für Sie hilfreich ist, mögen Sie es bitte, vielen Dank!