Vue實現數字輸入框中分割手機號碼的示例

來源：懂視網責編：小采時間：2020-11-27 22:28:23

Vue實現數字輸入框中分割手機號碼的示例

Vue實現數字輸入框中分割手機號碼的示例:需求在移動端彈出系統數字鍵盤，輸入手機號碼的時候，使用344形式分割。分析：首先，如果要在移動端彈出數字鍵盤，并且還可以有空格，那么就要使用type=phone的input框如果要實現輸入的時候增加空格，刪除的時候減少空格，那么就要使用watch 手

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue實現數字輸入框中分割手機號碼的示例:需求在移動端彈出系統數字鍵盤，輸入手機號碼的時候，使用344形式分割。分析：首先，如果要在移動端彈出數字鍵盤，并且還可以有空格，那么就要使用type=phone的input框如果要實現輸入的時候增加空格，刪除的時候減少空格，那么就要使用watch 手

需求

在移動端彈出系統數字鍵盤，輸入手機號碼的時候，使用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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue實現數字輸入框中分割手機號碼的示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：輸入 VUE 號碼

熱門焦點

Vue實現數字輸入框中分割手機號碼的示例

Vue實現數字輸入框中分割手機號碼的示例

Vue實現數字輸入框中分割手機號碼的示例

最新推薦

猜你喜歡

熱門推薦