以下是一个使用Vue.js 2.x实现的简单网页登录示例，包含表单验证和交互反馈

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue登录示例</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
.login-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

.error-message {
color: #ff4444;
font-size: 0.9em;
margin-top: 5px;
}

button {
width: 100%;
padding: 10px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #3aa876;
}
</style>
</head>
<body>
<div id="app">
<div class="login-container">
<h2>用户登录</h2>
<form @submit.prevent="handleSubmit">

<div class="form-group">
<label>用户名：</label>
<input
type="text"
v-model="username"
placeholder="请输入用户名"
@input="clearError"
>
<div v-if="errors.username" class="error-message">
{{ errors.username }}
</div>
</div>

<div class="form-group">
<label>密码：</label>
<input
type="password"
v-model="password"
placeholder请输入密码"
@input="clearError"
>
<div v-if="errors.password" class="error-message">
{{ errors.password }}
</div>
</div>

<button type="submit" :disabled="loading">
{{ loading ? '登录中...' : '立即登录' }}
</button>

<div v-if="errorMessage" class="error-message" style="margin-top: 15px;">
{{ errorMessage }}
</div>
</form>
</div>
</div>

// 验证密码
if (!this.password) {
this.errors.password = '密码不能为空'
isValid = false
} else if (this.password.length < 6) {
this.errors.password = '密码长度不能少于6位'
isValid = false
}

return isValid
},

clearError() {
this.errors.username = ''
this.errors.password = ''
this.errorMessage = ''
},

handleSubmit() {
if (!this.validateForm()) return

this.loading = true
this.errorMessage = ''

// 模拟API调用
setTimeout(() => {
// 模拟登录成功
if (this.username === 'admin' && this.password === '123456') {
alert('登录成功！')
// 实际开发中可跳转到主页
// this.$router.push('/home')
} else {
this.errorMessage = '用户名或密码错误'
}
this.loading = false
}, 1500)
}
}
})
</script>
</body>
</html>