简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Vue實作數字輸入框中分割手機號碼實例教學

小云云
發布： 2018-01-25 13:10:45
原創
2802 人瀏覽過

本文主要介紹了Vue實現數位輸入框中分割手機號碼的範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

需求

在行動裝置彈出系統數字鍵盤，輸入手機號碼的時候，使用344形式分割。

分析：

  1. 首先，如果要在行動端彈出數字鍵盤，而且還可以有空格，那麼就要使用type=" phone"的input框

  2. 如果要實現輸入的時候增加空格，刪除的時候減少空格，那麼就要使用watch

  3. ##手機號碼為11位，加上兩個空格，最多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實作手機號碼抽獎上下捲動動畫實例分享

AngularJS 實作表單驗證手機號碼功能

關於手機號碼類別的文章推薦#

以上是Vue實作數字輸入框中分割手機號碼實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
分裂 手機號碼 輸入
來源：php.cn
上一篇：防止頁面url快取中ajax中post請求 下一篇：JS判斷數組詳細介紹
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
9
1588
數獨檢查器無法運作？誰能幫我辨識錯誤？ 我嘗試了在線編輯器上的所有方法，但仍然收到錯誤。但當我在我的機器上的VSCode上執行此操作時，它工作正常。我很困惑，在沒有發現錯誤的情況下無法提交程式碼。我不知道該去哪裡找了。我...
來自於 2024-04-06 21:21:07
0
1
474
嘗試從 search.maven.org 檢索最新版本的套件時遇到錯誤 「錯誤：無法從Maven儲存庫擷取資料」同時從search.maven.org擷取最新版本號。編寫了以下php程式碼，我將針對所有其他套件進行修改。 <?php$url=&q...
來自於 2024-04-05 12:11:23
0
1
1471
如何設定apache載入index.html和index.php？ 這是我的疑問，我有以下結構：root/index.html根/api/index.php我已經使用內建的php伺服器進行了編碼，因此當我運行php-Slocalhost:3000時...
來自於 2024-04-05 09:27:53
0
1
3505
如何使用其 SKU「連接」多個產品？ 我想根據WooCommerce的SKU合併兩個或多個產品的庫存。例如：（共享相同庫存的兩種產品）透明手機殼iPhone11-SKU12345個人化iPhone11手機殼-SKU56...
來自於 2024-04-05 08:53:52
0
1
3478
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！