Vue的簡單登陸頁

這裏有兩個知識點：
第一個是點擊active切換。
第二個是blur失去焦點時

label的class:active等待number的返回值
當點擊input後返回number=1.此時就能獲取active。
當blur失去焦點，則返回0.加一個transtion:all .8s

<template>
    <div class="login">
        <div class="loginForm">
            <div class="login_tit">
                <h4>
                    <img src="../assets/1.jpg" alt="">
                </h4>
            </div>

            <label :class="{ active: number == 1}">
                <input type="text" placeholder="請輸入帳號" @focus="number =1" />
            </label>

            <label :class="{ active: number == 2}">
                <input type="text" placeholder="請輸入密碼" @focus="number =2" @blur="number=0" />
            </label>
        </div>

        <button class="loginBtn">
            登陸
        </button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                number: 0
            }
        }
    }
</script>

<style lang="less" scoped="scoped">
    .login_tit {
        line-height: 1.7;

        h4 {
            text-align: center;
            font-size: 20px;
            color: #8BC34A;
            font-weight: 500;

            img {
                    height: 105px;
                    display: block;
                    margin: 50px auto;
                    margin-bottom: 0;
                    
            }
    
        }
    }

    .loginForm {
        display: block;



        label {
            margin: 0 auto;
            display: table;
            width: 90%;
            margin-bottom: 50px;
            border: 1px solid #fff;
            transition: all .8s;
            border-radius: 300px;

            &.active {
                border: 1px solid #000;
            }

            input {
                border: 0;
                -webkit-box-shadow: 0 0 15px #ccc;
                box-shadow: 0 0 15px #0000000f;
                padding: 15px 0;
                width: 100%;
                float: left;
                text-indent: 20px;
                border-radius: 50px;
                outline: none;
            }
        }


    }

    .loginBtn {
        padding: 14px 0;
        border: 0;
        background: #000;
        color: #fff;
        border-radius: 50px;
        width: 92%;
        margin: auto;
        display: block;
        outline: none;
    }
</style>