使用vue编写一个登陆界面

好的，以下是一个简单的登录界面示例：

<template>
  <div class="login-container">
    <h1>登录</h1>
    <form>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password">
      </div>
      <button type="submit" class="btn" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      // 处理登录逻辑，例如向后端发送登录请求
      console.log("登录成功！");
    }
  }
};
</script>

<style scoped>
.login-container {
  width: 360px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px #ccc;
}

h1 {
  text-align: center;
}

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

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

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
</style>

这个登录界面使用了Vue的模板语法，包含了一个表单，用户可以在这个表单中输入用户名和密码，并点击登录按钮提交表单。在`<script>`标签中定义了一个`login()`方法，当用户点击登录按钮时会调用这个方法，你可以在这个方法中处理登录逻辑，例如向后端发送登录请求。你可以根据实际情况修改这个登录界面的样式和逻辑。