Tutoriel sur la façon d'utiliser Vue pour diviser les numéros de téléphone mobile dans des zones de saisie numérique-js tutoriel-php.cn

Tutoriel sur la façon d'utiliser Vue pour diviser les numéros de téléphone mobile dans des zones de saisie numérique

小云云

Libérer： 2018-01-25 13:10:45

original

2852 Les gens l'ont consulté

Cet article présente principalement l'exemple de fractionnement des numéros de téléphone portable dans la zone de saisie des numéros dans Vue. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Exigences

Lorsque le clavier numérique du système apparaît sur le terminal mobile, lors de la saisie du numéro de téléphone mobile, utilisez le format 344 pour diviser il.

Analyse :

Tout d'abord, si vous souhaitez faire apparaître le clavier numérique côté mobile et qu'il peut aussi y avoir des espaces, alors vous devez utiliser la zone de saisie type=" "phone"
Si vous souhaitez augmenter les espaces lors de la saisie et réduire les espaces lors de la suppression, vous devez utiliser watch
téléphone Le numéro est composé de 11 chiffres, plus deux espaces, jusqu'à 13 chiffres, la longueur doit donc être limitée

Mise en œuvre du code

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

Copier après la connexion

L'avez-vous tous appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Vue implémente la loterie de numéros de téléphone mobile, partage d'exemples d'animation à défilement haut et bas

AngularJS implémente la vérification du formulaire de numéro de téléphone mobile fonction

Articles recommandés sur les numéros de téléphone portable

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!