使用vue写一个登录页面，有用户名和密码，都做一些输入校验，不符合校验规则就提示重新输入...

好的，以下是一个简单的使用Vue实现的登录页面，包括输入校验和提示功能：

<template>
  <div class="login-container">
    <form class="login-form" @submit.prevent="handleSubmit">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" :class="{ 'invalid': !isUsernameValid }">
      <div class="error-message" v-show="!isUsernameValid">请输入正确的用户名</div>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" :class="{ 'invalid': !isPasswordValid }">
      <div class="error-message" v-show="!isPasswordValid">请输入正确的密码</div>
      <button type="submit" :disabled="!isValid">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  computed: {
    isUsernameValid() {
      return /^[a-zA-Z0-9_-]{4,16}$/.test(this.username);
    },
    isPasswordValid() {
      return /^[a-zA-Z0-9_-]{6,16}$/.test(this.password);
    },
    isValid() {
      return this.isUsernameValid && this.isPasswordValid;
    },
  },
  methods: {
    handleSubmit() {
      // 处理登录逻辑
    },
  },
};
</script>

<style>
.invalid {
  border: 1px solid red;
}
.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
  display: none;
}
.error-message.show {
  display: block;
}
</style>

解释一下代码的实现：

- 使用`v-model`绑定数据，即用户名和密码；
- 使用`computed`计算属性实现输入校验，即判断用户名和密码是否符合规则；
- 使用`:class`动态绑定样式，当输入不符合规则时，添加一个`invalid`类，用于显示红色边框；
- 使用`v-show`指令控制错误提示信息的显示和隐藏；
- 使用`:disabled`属性动态禁用登录按钮，当用户名和密码不符合规则时，禁用按钮；
- 使用`@submit.prevent`事件修饰符阻止默认的表单提交行为，使用`handleSubmit`方法处理登录逻辑。

需要注意的是，以上只是一个简单的示例实现，实际情况中还需要考虑更多的安全性和用户体验问题。