ホームページ > 記事 > ウェブフロントエンド > Vue を使用してデジタル入力ボックスで携帯電話番号を分割する方法のチュートリアル

Vue を使用してデジタル入力ボックスで携帯電話番号を分割する方法のチュートリアル

小云云オリジナル: 2018-01-25 13:10:452757ブラウズ

この記事では主に、番号入力ボックスでの携帯電話番号の分割を実装した Vue の例を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

要件

携帯端末にシステム数字キーボードが表示され、携帯電話番号を入力する場合は、344 形式の分割を使用してください。

分析:

まず、モバイル端末で数字キーボードをポップアップ表示したい場合、スペースも使用できる場合は、type="phone" の入力ボックスを使用する必要があります
入力を実装したり、スペースを追加したり、削除時にスペースを減らしたりする場合は、watchを使用する必要があります
携帯電話番号は11桁で、スペース2つを加えて最大13桁であるため、長さは限定

コード実装

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

もう学びましたか?急いで試してみてください。

Vue を使用してデジタル入力ボックスで携帯電話番号を分割する方法のチュートリアル

関連記事