用vue写一个修改密码页面
时间: 2023-12-19 18:03:59 浏览: 30
以下是一个简单的Vue.js修改密码页面的示例:
```html
<template>
<div class="password-change">
<h2>修改密码</h2>
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="old-password">旧密码</label>
<input type="password" id="old-password" v-model="oldPassword" required>
</div>
<div class="form-group">
<label for="new-password">新密码</label>
<input type="password" id="new-password" v-model="newPassword" required>
</div>
<div class="form-group">
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" v-model="confirmPassword" required>
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
oldPassword: '',
newPassword: '',
confirmPassword: ''
}
},
methods: {
submitForm() {
if (this.newPassword !== this.confirmPassword) {
alert('两次输入的新密码不一致!');
return;
}
// 在此处添加处理修改密码逻辑的代码
console.log('旧密码:', this.oldPassword);
console.log('新密码:', this.newPassword);
console.log('确认密码:', this.confirmPassword);
}
}
}
</script>
<style>
.password-change {
margin: 20px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 80px;
}
input {
padding: 5px;
border: 1px solid #ccc;
}
button {
padding: 5px 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
```
在上述示例中,我们创建了一个包含三个输入框和一个提交按钮的表单。用户需要输入旧密码、新密码和确认密码。然后,我们在`submitForm`方法中检查两次输入的新密码是否一致,如果不一致,就会弹出一个警告框。最后,我们使用`console.log`语句输出输入的密码,这里需要替换为实际的处理修改密码逻辑的代码。
这只是一个简单的示例,实际的修改密码页面可能需要更复杂的验证和逻辑。但是,该示例可以为您提供一个基本的Vue.js修改密码页面的框架,您可以根据需要进行修改和扩展。