用Vue写了一个前端的登录页面

最新推荐文章于 2024-07-09 15:11:55 发布

曾经的逍遥少年

最新推荐文章于 2024-07-09 15:11:55 发布

阅读量1k

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_46093203/article/details/123413360

版权

本文介绍了使用Vue.js框架创建前端登录页面的过程，通过结合JavaScript技术，实现交互式的用户登录界面。

摘要由CSDN通过智能技术生成

<template>
  <div class="backContent">
    <div class="loginContent">
        <h3>登录</h3>
        <div class="loginSelect">
            <ul>
                <a href="#">
                    <i style="margin-left: 10px;font-style: normal;">账号密码登录</i>
                </a>
                <i style="padding: 32px;font-style: normal;">|</i>
                <a href="#">
                    <i style="font-style: normal;">扫描二维码登录</i>
                </a>
            </ul>
        </div>
      <el-form
        class="loginStyle"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
      >
        <div class="accountStyle">
            <el-form-item prop="userAccount">
                <el-input prefix-icon ="el-icon-user"
                    v-model="loginForm.userAccount"
                    type="input"
                    placeholder="请输入你的账号">
                </el-input>
            </el-form-item>     
        </div>

        <div class="pwdStyle">
        <el-form-item prop="userPassword">
          <el-input prefix-icon="el-icon-unlock"
            v-model="loginForm.userPassword"
            type="password" show-password
            placeholder="请输入你的密码">
          </el-input>
        </el-form-item>
        </div>

    <div class="drag" ref=