包括使用Bootstrap的模态

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
  登录
</button>

<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框的内容 -->
    </div>
  </div>
</div>

<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="loginModalLabel">登录</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <!-- 登录表单 -->
    <form>
      <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username">
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password">
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
    </form>
  </div>
  <div class="modal-footer">
    <p>还没有账号？<a href="#" data-bs-toggle="modal" data-bs-target="#registerModal">点击注册</a></p>
  </div>
</div>

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

<div class="modal-body" id="loginModalBody">
  <form @submit="login">
    <div class="mb-3">
      <label for="username" class="form-label">用户名</label>
      <input type="text" class="form-control" id="username" v-model="username">
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">密码</label>
      <input type="password" class="form-control" id="password" v-model="password">
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
  </form>
</div>

new Vue({
  el: '#loginModalBody',
  data: {
    username: '',
    password: ''
  },
  methods: {
    login: function() {
      // 处理登录逻辑
    }
  }
});