使用Vue写个登录代码

以下是一个简单的Vue登录代码示例，包含了输入框、表单验证、登录按钮等基本功能：

<template>
  <div class="login">
    <h1>登录</h1>
    <form @submit.prevent="login">
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="username" required>
      <label for="password">密码</label>
      <input type="password" id="password" v-model="password" required>
      <button type="submit" :disabled="!isValid">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      isValid: false
    }
  },
  methods: {
    login() {
      // 发送登录请求
      // ...
      console.log(this.username, this.password)
    }
  },
  watch: {
    username(val) {
      this.validateInput(val, this.password)
    },
    password(val) {
      this.validateInput(this.username, val)
    }
  },
  mounted() {
    this.validateInput(this.username, this.password)
  },
  computed: {
    isValid() {
      return this.username && this.password
    }
  },
  validations: {
    username: {
      required
    },
    password: {
      required
    }
  }
}
</script>

这段代码使用了Vue的模板语法和组件选项，其中：

- `template` 标签中定义了登录页面的 HTML 结构，包括输入框、表单验证和登录按钮等元素。
- `data` 函数返回了组件的数据对象，包括用户名、密码和验证状态等属性。
- `methods` 中定义了 `login` 方法，用于处理登录请求。
- `watch` 监听了用户名和密码的变化，调用 `validateInput` 方法进行表单验证。
- `mounted` 钩子在组件挂载后调用 `validateInput` 方法进行初始表单验证。
- `computed` 计算属性用于判断是否可以提交表单。
- `validations` 中定义了表单验证规则。

需要注意的是，这段代码仅作为示例，实际的登录代码可能需要更多的功能和优化。