Tutorial zur Verwendung von Vue zum Aufteilen von Mobiltelefonnummern in digitale Eingabefelder-js-Tutorial-php.cn

Tutorial zur Verwendung von Vue zum Aufteilen von Mobiltelefonnummern in digitale Eingabefelder

小云云

Freigeben： 2018-01-25 13:10:45

Original

2832 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Beispiel der Aufteilung von Mobiltelefonnummern im Nummerneingabefeld in Vue vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Anforderungen

Wenn die numerische Systemtastatur auf dem mobilen Endgerät angezeigt wird, verwenden Sie bei der Eingabe der Mobiltelefonnummer das 344-Format zum Teilen Es.

Analyse:

Wenn Sie zunächst die numerische Tastatur auf der mobilen Seite einblenden möchten und dort auch Leerzeichen vorhanden sein können, dann müssen Sie das Eingabefeld type=" "phone" verwenden
Wenn Sie beim Eingeben die Leerzeichen vergrößern und beim Löschen die Leerzeichen reduzieren möchten, müssen Sie watch
Telefon Die Nummer besteht aus 11 Ziffern plus zwei Leerzeichen, bis zu 13 Ziffern, daher muss die Länge begrenzt sein

Code-Implementierung

<body>
 <p id="app">
 <!-- 类型为phone，最大长度为13 -->
 <input type="phone" v-model="dataPhone" maxlength="13">
 </p>
</body>
<script>
 var vm = new Vue({
 el: &#39;#app&#39;,
 data() {
  return {
  dataPhone: &#39;&#39;
  }
 },
 watch: {
  // 通过watch来设置空格
  dataPhone(newValue, oldValue) {
  if (newValue.length > oldValue.length) { // 文本框中输入
   if (newValue.length === 3 || newValue.length === 8) {
   this.dataPhone += &#39; &#39;
   }
  } else { // 文本框中删除
   if (newValue.length === 9 || newValue.length === 4) {
   this.dataPhone = this.dataPhone.trim()
   }
  }
  }
 }
 })
</script>

Nach dem Login kopieren

Habt ihr es alle gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

Vue implementiert die Lotterie von Mobiltelefonnummern, Auf- und Abwärtsscrollen, Animationsbeispiel zum Teilen

AngularJS implementiert die Formularüberprüfung von Mobiltelefonnummern Funktion

Empfohlene Artikel über Mobiltelefonnummern

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von Vue zum Aufteilen von Mobiltelefonnummern in digitale Eingabefelder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!