效果图

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。

我的邮箱：2351598671@qq.com

完整代码

    
    
    编辑个人资料
    
    
        * {
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #2c3e50;
            margin-top: 0;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #42b983;
            outline: none;
            box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
        }
        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
        }
        .avatar-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 2px solid #ddd;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
			 margin-left: 20px;
            background-color: #42b983;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #369f6b;
        }
        .btn-secondary {
            background-color: #6c757d;
            margin-left: 10px;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        .form-actions {
            text-align: right;
            margin-top: 30px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
    


    

        
编辑个人资料
        
        
            

                

                    
                    更换头像
                    
                
            
            
            

                用户名
                
                
{{ errors.username }}
            
            
            

                电子邮箱
                
                
{{ errors.email }}
            
            
            

                手机号码
                
                
{{ errors.phone }}
            
            
            

                性别
                
                    请选择性别
                    男
                    女
                    其他
                
            
            
            

                出生日期
                
            
            
            

                个人简介
                
            
            
            

                重置
                保存更改
            
        
    
    
        const app = Vue.createApp({
            data() {
                return {
                    form: {
                        avatar: '',
                        username: '张三',
                        email: 'zhangsan@example.com',
                        phone: '13800138000',
                        gender: 'male',
                        birthday: '1990-01-01',
                        bio: '前端开发工程师，热爱编程和新技术。'
                    },
                    errors: {
                        username: '',
                        email: '',
                        phone: ''
                    }
                }
            },
            methods: {
                handleAvatarChange(event) {
                    const file = event.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            this.form.avatar = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                },
                validateForm() {
                    let isValid = true;
                    this.errors = {
                        username: '',
                        email: '',
                        phone: ''
                    };
                    
                    // 验证用户名
                    if (!this.form.username) {
                        this.errors.username = '用户名不能为空';
                        isValid = false;
                    } else if (this.form.username.length