vue实现手机号码添加功能,如果没有输入手机号码,显示添加按钮,如果有手机号码,显示修改按钮
时间: 2024-05-11 16:15:50 浏览: 41
好的,我可以为您解答该问题。您可以使用v-if指令来实现这个功能。首先在Vue组件中,定义一个data属性来保存手机号码,然后在模板中判断手机号码是否存在,若存在则显示修改按钮,否则显示添加按钮。具体代码如下:
```
<template>
<div>
<input v-model="phoneNumber" placeholder="请输入手机号码">
<button v-if="!phoneNumber" @click="addPhoneNumber">添加</button>
<button v-if="phoneNumber" @click="updatePhoneNumber">修改</button>
</div>
</template>
<script>
export default {
data() {
return {
phoneNumber: '',
}
},
methods: {
addPhoneNumber() {
// 执行添加手机号码的操作
},
updatePhoneNumber() {
// 执行修改手机号码的操作
},
},
}
</script>
```
以上代码中,我们在模板中使用v-if指令判断phoneNumber是否为空,若为空则显示添加按钮,否则显示修改按钮。在按钮的@click事件中,分别执行添加和修改手机号码的操作。希望这可以帮助您解决问题,若有任何疑问请随时问我。
阅读全文