溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Vue如何實現數字輸入框中分割手機號碼功能，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
需求
在移動端彈出系統數字鍵盤，輸入手機號碼的時候，使用344形式分割。
分析：
首先，如果要在移動端彈出數字鍵盤，并且還可以有空格，那么就要使用type="phone"的input框
如果要實現輸入的時候增加空格，刪除的時候減少空格，那么就要使用watch
手機號碼為11位，加上兩個空格，最多13位，因此要限定長度
代碼實現
<body>
<div id="app">
<!-- 類型為phone，最大長度為13 -->
<input type="phone" v-model="dataPhone" maxlength="13">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
dataPhone: ''
}
},
watch: {
// 通過watch來設置空格
dataPhone(newValue, oldValue) {
if (newValue.length > oldValue.length) { // 文本框中輸入
if (newValue.length === 3 || newValue.length === 8) {
this.dataPhone += ' '
}
} else { // 文本框中刪除
if (newValue.length === 9 || newValue.length === 4) {
this.dataPhone = this.dataPhone.trim()
}
}
}
}
})
</script>以上是“Vue如何實現數字輸入框中分割手機號碼功能”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
