vue + elementplus动态控制表单显隐

一：<template>内容

template中有两个表单，先显示登录表单(短信验证码表单隐藏)，点击登录后，切换至短信验证码表单(登录表单隐藏)。

        <div :class="cartxt(naun1)" style="margin-top: 0px;">
            <el-form :model="loginForm" style="margin-left: 15px;" :rules="loginRules">
                <el-form-item prop="username">
                    <el-input type="text" placeholder="请输入账号" v-model="loginForm.username" :prefix-icon="Avatar">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="loginForm.password" show-password @keyup.enter="handleLogin"
                              :prefix-icon="Lock"/>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 58%"
                              @keyup.enter="handleLogin" :prefix-icon="BellFilled"/>
                    <div class="login-code">
                        <img :src="codeUrl" @click="getCode">
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" @click="handleLogin" class="btn_sub" type="default">
                        <span v-if="!loading" style="color: #FFFFFF;">登录</span>
                        <span v-else>登录中...</span>

                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div :class="cartxt(naun2)">
            <el-form :rules="smsRules">
                <el-form-item prop="sms" label="验证码">
                    <el-input placeholder="请输入验证码" style="width: 190px" v-model="sms" type="text" autocomplete="off"/>
                </el-form-item>
                <el-form-item>
                    <el-button :disabled="count != 0" style="margin-left: 70px" @click="verification">{{ count === 0 ?
                        '获取验证码' : count + '秒后发送' }}
                    </el-button>
                    <el-button style="margin-left: 20px" @click="submitSMS">确定</el-button>
                </el-form-item>
            </el-form>
        </div>

二：script内容

data中定义两个变量，用于控制css的改变。点击登录，调用handleLogin方法，通过改变naun值来切换表单。

export default {
        data() {
            return {
                naun1: 1,
                naun2: 0
            }
        },
        methods: {
            handleLogin() {
                this.naun1 = 0
                this.naun2 = 2
            }
            cartxt(naun) {
                if (naun == 0) {
                    return "hide"
                } else if (naun == 1) {
                    return "login"
                } else if (naun == 2) {
                    return "phoneForm"
                }
            }
    }
}

三：CSS内容

login是用户名、密码表单的样式；phoneForm是短信验证码表单样式；hide隐藏样式

    .hide {
        display: none;
    }
    .login {
        width: 300px;
        margin: 150px auto;
        padding: 25px 0;
    }
    .phoneForm {
        height: 229.25px;
        width: 300px;
        margin: 150px auto;
        margin-top: 30px;
        padding: 25px 0;
    }