Home > Article > Web Front-end > Tutorial on how to use Vue to split mobile phone numbers in digital input boxes

Tutorial on how to use Vue to split mobile phone numbers in digital input boxes

小云云Original: 2018-01-25 13:10:452757browse

This article mainly introduces the example of Vue implementing the segmentation of mobile phone numbers in the number input box. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Requirements

When the system numeric keyboard pops up on the mobile terminal and the mobile phone number is entered, use the 344 format to split it.

Analysis:

First of all, if you want to pop up the numeric keyboard on the mobile terminal and there can be spaces, then you must use type=" phone" input box
If you want to increase spaces when inputting and reduce spaces when deleting, then you must use watch
mobile phone The number is 11 digits, plus two spaces, up to 13 digits, so the length must be limited

Code implementation

<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>

Have you learned it? Hurry up and try it out.

Related recommendations:

vue implements mobile phone number lottery up and down scrolling animation example sharing

AngularJS implements form verification mobile phone number function

Recommended articles about mobile phone numbers

The above is the detailed content of Tutorial on how to use Vue to split mobile phone numbers in digital input boxes. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Prevent post requests in ajax in page url cacheNext article：Prevent post requests in ajax in page url cache

See more

Tutorial on how to use Vue to split mobile phone numbers in digital input boxes

Related articles