用户在input框填写（包含输入和删除）手机号时，动态添加空格，这样只是为了方便客户看。当传递手机号给后台时，需要去掉空格。 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
<input type="tel" placeholder="请输入手机号" v-model="phoneNumberInput"
maxlength="13" />
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
phoneNumberInput: "",
phoneNumber: ""
};
},
watch: {
// 通过watch来设置空格
phoneNumberInput(val, oldValue) {
// console.log(val,oldValue);
if (val.length > oldValue.length) {
// 文本框中输入
if (val.length === 4 || val.length === 9) {
let length = val.length
this.phoneNumberInput = val.substr(0, length - 1) + ` ${val[length - 1]}`
}
} else {
// 文本框中删除
if (val.length === 9 || val.length === 4) {
this.phoneNumberInput = this.phoneNumberInput.replace(/\s*$/g, "");
}
}
if (val.length >= 13) {
this.phoneNumber = val.replace(/\s+/g, "")
console.log(this.phoneNumber);
}
},
},
});
</script>
</html>
