這篇文章主要講解了如何實(shí)現(xiàn)vue輸入電話號(hào)碼自動(dòng)按3-4-4分割功能，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供做網(wǎng)站、成都網(wǎng)站制作服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

輸入框綁定

監(jiān)聽(tīng)事件，每次號(hào)碼發(fā)生改變時(shí)觸發(fā)
大體的邏輯是：先比較號(hào)碼變化前后的長(zhǎng)度，判斷是輸入還是刪除，如果是輸入的話，利用正則表達(dá)式改變號(hào)碼格式。

watch: {
 phoneNum (newValue, oldValue) { // 監(jiān)聽(tīng)電話號(hào)碼
 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) {
 // 驗(yàn)證/保存的手機(jī)號(hào)碼，去除空格
 this.state.checkPhoneNum = this.phoneNum.replace(/\s/g, '')
 console.log('輸入的電話號(hào)碼是：', this.state.checkPhoneNum)
 } 
 }
 },

效果示意

附錄：下面看下vue手機(jī)號(hào)按344分隔，銀行卡號(hào)每4位空格分隔

實(shí)現(xiàn)效果：

1. 手機(jī)號(hào)輸入/粘貼時(shí)，不允許輸入數(shù)字外的其它字符，按344分隔，最大輸入11位數(shù)字

2. 銀行卡號(hào)輸入/粘貼時(shí)，不允許輸入數(shù)字外的其它字符，每四位用空格分隔

代碼：

js：

上述方案即可實(shí)現(xiàn)基本效果，但如果從中間開(kāi)始刪除或添加內(nèi)容時(shí)，光標(biāo)會(huì)自動(dòng)跑到最后，如下：

若想光標(biāo)留在刪除/添加內(nèi)容位置，需要設(shè)置光標(biāo)位置：

修改js如下：

看完上述內(nèi)容，是不是對(duì)如何實(shí)現(xiàn)vue輸入電話號(hào)碼自動(dòng)按3-4-4分割功能有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。