vue实现手机号码添加功能,如果没有输入手机号码,显示添加按钮,如果有手机号码,显示修改按钮,并且校验手机号码的正确性
时间: 2024-06-10 11:04:56 浏览: 4
好的,我明白了。针对您的问题,可以采用Vue框架的计算属性(computed property)来实现该功能。您可以定义一个手机号码的data属性和一个按钮的状态的data属性来控制显示状态。然后利用Vue的watch属性来监听手机号码data属性的变化,并根据是否有输入来决定按钮的状态。同时,可以在该watch中添加手机号码的校验逻辑。最后,在用户点击按钮的时候,可以通过判断按钮状态来执行添加或者修改操作。具体实现代码可以参考以下代码:
```
<template>
<div>
<input type="text" v-model="phone">
<button v-if="addBtnShow" @click="addPhone">添加手机号码</button>
<button v-else @click="modifyPhone">修改手机号码</button>
</div>
</template>
<script>
export default {
data() {
return {
phone: '', // 手机号码
addBtnShow: true // 添加按钮显示
}
},
watch: {
phone() {
// 校验手机号码的正则表达式
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if (reg.test(this.phone)) {
this.addBtnShow = false;
} else {
this.addBtnShow = true;
}
}
},
methods: {
addPhone() {
// 添加手机号码
},
modifyPhone() {
// 修改手机号码
}
}
}
</script>
```