Heim >Web-Frontend >js-Tutorial >Tutorial zur Verwendung von Vue zum Aufteilen von Mobiltelefonnummern in digitale Eingabefelder

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

小云云
小云云Original
2018-01-25 13:10:452827Durchsuche

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:

  1. 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

  2. Wenn Sie beim Eingeben die Leerzeichen vergrößern und beim Löschen die Leerzeichen reduzieren möchten, müssen Sie watch

  3. 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>
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!

Stellungnahme:
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