本文主要介紹了Vue實現數位輸入框中分割手機號碼的範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
需求
在行動裝置彈出系統數字鍵盤，輸入手機號碼的時候，使用344形式分割。
分析：
首先，如果要在行動端彈出數字鍵盤，而且還可以有空格，那麼就要使用type=" phone"的input框
如果要實現輸入的時候增加空格，刪除的時候減少空格，那麼就要使用watch
#程式碼實作
<body>
<p id="app">
<!-- 类型为phone，最大长度为13 -->
<input type="phone" v-model="dataPhone" maxlength="13">
</p>
</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實作數字輸入框中分割手機號碼實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
