需求
在移动端弹出系统数字键盘，输入手机号码的时候，使用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Vue.js数字输入框组件使用方法详解
- 基于Vue开发数字输入框组件
- vue实现验证码输入框组件
- vue组件中点击按钮后修改输入框的状态实例代码
- vue input输入框模糊查询的示例代码
- vue中使用iview自定义验证关键词输入框问题及解决方法
- Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
- vue.js 实现输入框动态添加功能
- vue 简单自动补全的输入框的示例
- vue.js实现只能输入数字的输入框
