简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Vue实现数字输入框中分割手机号码实例教程

小云云
Lepaskan： 2018-01-25 13:10:45
asal
2802 orang telah melayarinya

本文主要介绍了Vue实现数字输入框中分割手机号码的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

需求

在移动端弹出系统数字键盘，输入手机号码的时候，使用344形式分割。

分析：

  1. 首先，如果要在移动端弹出数字键盘，并且还可以有空格，那么就要使用type="phone"的input框

  2. 如果要实现输入的时候增加空格，删除的时候减少空格，那么就要使用watch

  3. 手机号码为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>
Salin selepas log masuk

大家学会了吗？赶紧动手尝试一下吧。

相关推荐：

vue实现手机号码抽奖上下滚动动画实例分享

AngularJS 实现表单验证手机号功能

有关手机号类的文章推荐

Atas ialah kandungan terperinci Vue实现数字输入框中分割手机号码实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
分割 手机号码 输入
sumber：php.cn
Artikel sebelumnya：防止页面url缓存中ajax中post请求 Artikel seterusnya：JS判断数组详细介绍
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
9
1588
Pemeriksa Sudoku tidak berfungsi? Bolehkah sesiapa membantu saya mengenal pasti ralat? Saya mencuba segala-galanya pada editor dalam talian tetapi masih mendapat ralat. Tetapi a...
daripada 2024-04-06 21:21:07
0
1
474
Ralat telah ditemui semasa cuba mendapatkan semula versi terkini pakej daripada search.maven.org "Ralat: Tidak dapat mengambil data daripada repositori Maven" semasa mendapatkan...
daripada 2024-04-05 12:11:23
0
1
1471
Bagaimana untuk mengkonfigurasi apache untuk memuatkan index.html dan index.php? Inilah keraguan saya, saya mempunyai struktur berikut: root/index.html root/api/index.php ...
daripada 2024-04-05 09:27:53
0
1
3505
Bagaimana untuk "menyambung" berbilang produk menggunakan SKU mereka? Saya ingin menggabungkan inventori dua atau lebih produk berdasarkan SKU mereka dalam WooC...
daripada 2024-04-05 08:53:52
0
1
3478
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！