demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="密码登录" @click="isSms=false">
    <input type="button" value="短信登录" @click="isSms=true">
    <div v-show="isSms">
        <p>
            <label>手机号</label>
            <input type="text" placeholder="手机号" v-model="sms.mobile">
        </p>
        <p>
            <label>验证码</label>
            <input type="text" placeholder="验证码" v-model="sms.code">
        </p>
    </div>
    <div v-show="!isSms">
        <p>
            <label>用户名</label>
            <input type="text" placeholder="用户名" v-model="info.username">
        </p>
        <p>
            <label>密&nbsp;&nbsp;&nbsp;码</label>
            <input type="password" placeholder="密码" v-model="info.password">
        </p>
    </div>

    <input type="button" value="登 录" @click="loginForm">

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isSms: false,
            info: {
                username: "",
                password: ""
            },
            sms: {
                mobile: "",
                code: ""
            }
        },
        methods: {
            loginForm: function () {
                // 1、获取用户输入的值
                // 用户名 密码登录
                let dataDict = this.isSms ? this.sms : this.info;
                // console.log(dataDict)
                let url;
                if (this.isSms){
                    url = "https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile";
                }  else {
                    url = "https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password";
                }

                // 2、向某个地址发送请求 axios
                // https://api.luffycity.com/api/v1/auth/password/login/?loginWay=password
                // {username: "123132", password: "1231231321"}

                // https://api.luffycity.com/api/v1/auth/mobile/login/?loginWay=mobile
                // {mobile: "13300000000", code: "123456"}
                axios({
                    method: "post",
                    url: url,
                    data: dataDict,
                    headers: {
                        "Content-Type": "application/json"
                    }
                }).then(function (res) {
                    if (res.data.code === -1){
                        alert(res.data.msg);
                        return;
                    }
                    // 登陆成功后跳转
                    window.location.href("www.baidu.com")
                    console.log(res.data);
                }).catch(function (error) {
                    console.log(error)
                    alert("请求异常！重新操作！")
                })
            }
        }
    })
</script>
</body>
</html>