首頁 > 文章 > web前端 > Vue實作數字輸入框中分割手機號碼實例教學

Vue實作數字輸入框中分割手機號碼實例教學

小云云原創: 2018-01-25 13:10:452807瀏覽

本文主要介紹了Vue實現數位輸入框中分割手機號碼的範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

需求

在行動裝置彈出系統數字鍵盤，輸入手機號碼的時候，使用344形式分割。

分析：

首先，如果要在行動端彈出數字鍵盤，而且還可以有空格，那麼就要使用type=" phone"的input框
如果要實現輸入的時候增加空格，刪除的時候減少空格，那麼就要使用watch
##手機號碼為11位，加上兩個空格，最多13位，因此要限定長度

#程式碼實作

<body>
 <p id="app">
 <!-- 类型为phone，最大长度为13 -->
 <input type="phone" v-model="dataPhone" maxlength="13">
 </p>
</body>
<script>
 var vm = new Vue({
 el: &#39;#app&#39;,
 data() {
  return {
  dataPhone: &#39;&#39;
  }
 },
 watch: {
  // 通过watch来设置空格
  dataPhone(newValue, oldValue) {
  if (newValue.length > oldValue.length) { // 文本框中输入
   if (newValue.length === 3 || newValue.length === 8) {
   this.dataPhone += &#39; &#39;
   }
  } else { // 文本框中删除
   if (newValue.length === 9 || newValue.length === 4) {
   this.dataPhone = this.dataPhone.trim()
   }
  }
  }
 }
 })
</script>

大家學會了嗎？趕快動手嘗試。

Vue實作數字輸入框中分割手機號碼實例教學

相關文章