当前位置：首页 > VUE

html嵌入vue实现登录

2026-01-21 20:19:50VUE

在HTML中嵌入Vue实现登录功能

引入Vue.js

通过CDN或本地文件引入Vue.js，推荐使用最新稳定版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 或生产环境版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

创建HTML结构

设计登录表单的基本HTML结构，包含用户名、密码输入框和提交按钮：

<div id="app">
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
  <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
</div>

编写Vue实例

初始化Vue实例并实现登录逻辑：

new Vue({
  el: '#app',
  data: {
    username: '',
    password: '',
    errorMessage: ''
  },
  methods: {
    handleSubmit() {
      if (!this.username || !this.password) {
        this.errorMessage = '用户名和密码不能为空';
        return;
      }

      // 模拟API请求
      setTimeout(() => {
        if (this.username === 'admin' && this.password === '123456') {
          alert('登录成功');
          // 实际项目中这里跳转到首页
        } else {
          this.errorMessage = '用户名或密码错误';
        }
      }, 500);
    }
  }
});

添加样式（可选）

为登录表单添加基础样式：

#app {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
}
input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
}
.error {
  color: red;
  margin-top: 10px;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Vue登录示例</title>
  <style>
    #app {
      max-width: 300px;
      margin: 0 auto;
      padding: 20px;
    }
    input {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      padding: 8px;
    }
    button {
      width: 100%;
      padding: 10px;
      background-color: #42b983;
      color: white;
      border: none;
    }
    .error {
      color: red;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="username" placeholder="用户名">
      <input type="password" v-model="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        username: '',
        password: '',
        errorMessage: ''
      },
      methods: {
        handleSubmit() {
          if (!this.username || !this.password) {
            this.errorMessage = '用户名和密码不能为空';
            return;
          }

          setTimeout(() => {
            if (this.username === 'admin' && this.password === '123456') {
              alert('登录成功');
            } else {
              this.errorMessage = '用户名或密码错误';
            }
          }, 500);
        }
      }
    });
  </script>
</body>
</html>