Heim >Web-Frontend >js-Tutorial >Tutorial zur Verwendung von Vue zum Aufteilen von Mobiltelefonnummern in digitale Eingabefelder
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
Code-Implementierung
<body> <p id="app"> <!-- 类型为phone,最大长度为13 --> <input type="phone" v-model="dataPhone" maxlength="13"> </p> </body> <script> var vm = new Vue({ el: '#app', data() { return { dataPhone: '' } }, watch: { // 通过watch来设置空格 dataPhone(newValue, oldValue) { if (newValue.length > oldValue.length) { // 文本框中输入 if (newValue.length === 3 || newValue.length === 8) { this.dataPhone += ' ' } } 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!