当前位置：首页 > VUE

vue 实现简单登陆

2026-01-07 04:01:58VUE

以下是一个使用 Vue 3 实现的简单登录功能示例，包含表单验证和基础交互逻辑：

创建 Vue 组件

<template>
  <div class="login-container">
    <h3>用户登录</h3>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          v-model="form.username"
          @blur="validateField('username')"
        />
        <span class="error" v-if="errors.username">{{ errors.username }}</span>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          v-model="form.password"
          @blur="validateField('password')"
        />
        <span class="error" v-if="errors.password">{{ errors.password }}</span>
      </div>

      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '登录中...' : '登录' }}
      </button>
    </form>
  </div>
</template>

脚本部分

<script>
import { reactive, ref } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      password: ''
    })

    const errors = reactive({
      username: '',
      password: ''
    })

    const isSubmitting = ref(false)

    const validateField = (field) => {
      if (field === 'username' && !form.username.trim()) {
        errors.username = '请输入用户名'
      } else if (field === 'password' && !form.password.trim()) {
        errors.password = '请输入密码'
      } else {
        errors[field] = ''
      }
    }

    const handleSubmit = () => {
      validateField('username')
      validateField('password')

      if (!errors.username && !errors.password) {
        isSubmitting.value = true

        // 模拟API调用
        setTimeout(() => {
          alert(`登录成功，欢迎 ${form.username}`)
          isSubmitting.value = false
        }, 1000)
      }
    }

    return {
      form,
      errors,
      isSubmitting,
      validateField,
      handleSubmit
    }
  }
}
</script>

样式部分

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

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

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

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

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

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}
</style>