這篇文章主要講解了如何實現vue輸入電話號碼自動按3-4-4分割功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

從網站建設到定制行業解決方案，為提供做網站、成都網站制作服務體系，各種行業企業客戶提供網站建設解決方案，助力業務快速發展。創新互聯將不斷加快創新步伐，提供優質的建站服務。

輸入框綁定

監聽事件，每次號碼發生改變時觸發
大體的邏輯是：先比較號碼變化前后的長度，判斷是輸入還是刪除，如果是輸入的話，利用正則表達式改變號碼格式。

watch: {
 phoneNum (newValue, oldValue) { // 監聽電話號碼
 this.phoneNum = newValue.length > oldValue.length ? newValue.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3') : this.phoneNum.trim()
 if (this.phoneNum.length === 13) {
 // 驗證/保存的手機號碼，去除空格
 this.state.checkPhoneNum = this.phoneNum.replace(/\s/g, '')
 console.log('輸入的電話號碼是：', this.state.checkPhoneNum)
 } 
 }
 },

效果示意

附錄：下面看下vue手機號按344分隔，銀行卡號每4位空格分隔

實現效果：

1. 手機號輸入/粘貼時，不允許輸入數字外的其它字符，按344分隔，最大輸入11位數字

2. 銀行卡號輸入/粘貼時，不允許輸入數字外的其它字符，每四位用空格分隔

代碼：

js：

上述方案即可實現基本效果，但如果從中間開始刪除或添加內容時，光標會自動跑到最后，如下：

若想光標留在刪除/添加內容位置，需要設置光標位置：

修改js如下：

看完上述內容，是不是對如何實現vue輸入電話號碼自動按3-4-4分割功能有進一步的了解，如果還想學習更多內容，歡迎關注創新互聯行業資訊頻道。