国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

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

2019-11-19 15:12:16
字體:
來源:轉載
供稿:網友

需求

在移動端彈出系統數字鍵盤,輸入手機號碼的時候,使用344形式分割。

分析:

  1. 首先,如果要在移動端彈出數字鍵盤,并且還可以有空格,那么就要使用type="phone"的input框
  2. 如果要實現輸入的時候增加空格,刪除的時候減少空格,那么就要使用watch
  3. 手機號碼為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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 南康市| 郓城县| 云龙县| 开化县| 南安市| 林周县| 秭归县| 怀集县| 昂仁县| 南城县| 玛多县| 沾化县| 五寨县| 宝鸡市| 惠安县| 太仆寺旗| 崇阳县| 怀来县| 乌兰察布市| 房产| 土默特左旗| 金塔县| 盈江县| 汝州市| 宝鸡市| 启东市| 曲沃县| 胶州市| 彭山县| 武冈市| 车险| 鄂托克旗| 禄劝| 桐乡市| 博白县| 三穗县| 铜鼓县| 鄂温| 西乌珠穆沁旗| 文水县| 敦化市|