vue 登陆页面

最新推荐文章于 2024-10-19 21:20:48 发布

Fantasy嘿

最新推荐文章于 2024-10-19 21:20:48 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏：编程代码文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50794535/article/details/128151054

本文主要介绍如何使用Vue.js框架创建一个登录页面，重点在于页面样式的实现，其他功能可以根据具体需求进行定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 框架主要看样式，其他的根据需求改

<!-- 登陆 -->
<template>
  <div class="login">
    <div class="loginTop">欢迎登陆</div>
    <div class="loginContent">
      <input
        type="text"
        name="phone"
        class="phone"
        v-model="phone"
        placeholder="请输入手机号"
        required
      />
      <input
        type="text"
        name="password"
        class="password"
        v-model="password"
        placeholder="请输入密码"
        required
      />
      <div>
        <button class="btn" @click="login">登陆</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      password: '',
    }
  },
  methods: {
    login: async function () {
      // let res = await this.$store.dispatch('getLogin', {
      //   phone: this.phone,
      //   password: t